Looking to implement a directive and utilize the argument in your controller?
<body ng-app="tstApp">
<navigationbar tst="hello">
</navigationbar>
</body>
To achieve this, you will need to create a directive along with its corresponding controller:
navigationBar = {};
navigationBar.directives = {};
navigationBar.controllers = {};
navigationBar.directives.navigationbar = function () {
return {
restrict: 'E',
scope: {
t1: '@tst',
t2: '=tst',
t3: '&tst'
},
templateUrl: "common/navigation_bar/navigation_bar.tpl.html",
controller: "NavigationBarController"
}
};
navigationBar.controllers.NavigationBarController = function ($scope, Api) {
console.log($scope);
console.log($scope.t1);
console.log($scope.t2);
console.log($scope.t3);
};
testApp.directive(navigationBar.directives);
testApp.controller(navigationBar.controllers);
Upon inspecting the console logs, you may notice:
Scope {$id: "003", ...}
$$asyncQueue: Array[0]
...
$memId: "003"
...
nav: Object
t1: "hello"
t2: undefined
...
and:
undefined navigation_bar.js:33
undefined navigation_bar.js:34
function (locals) {
return parentGet(parentScope, locals);
}
Why does console.log($scope.t1); not display the value when it should be present in scope->t1: "hello"?
Any insights on why this behavior occurs? Julio seeks assistance on the matter.
Further details:
If replacing the templateUrl with:
template: "Scope Id: {{$id }}, t1: {{ t1 }}"
The output will display:
Scope Id: 003, t1: hello
Alternatively, include a trace within the controller as shown below:
console.log('Scope Id: ' + $scope.$id + ', t1: ' + $scope.t1);
This will result in:
Scope Id: 003, t1: undefined
Even though the scope is shared, why is accessing the t1 value proving difficult in the controller? Is further evaluation necessary?