I have been working with isolated scope directives for a bit of time, and a question arises, observing its behavior:
Why can't I bind the variables that I define inside the directive, the inherited scope, directly to the view?
Let me show an example of this code pen:
http://codepen.io/anon/pen/VLKjrv
When I create a new $ scope variable inside the directive controller and I try to associate it with a view, it does not work. On the other hand, when I bind this variable to html, which comes from the template directive attribute, it works.
Check the code:
<body ng-app="isolated-test-app">
<section ng-controller="isolatedTestCtrl">
<article>
<h1>test1</h1>
<div isolated-directive binding-from-attr="test">
<span ng-bind="test"></span>
<span ng-bind="test2"></span>
</div>
<h1>test2</h1>
<div isolated-directive-number-two binding-from-attr="test">
</div>
</article>
</section>
angular.module('isolated-test-app', [])
.controller('isolatedTestCtrl', function isolatedTestCtrl($scope){
$scope.test = 'Binded from parent controller';
})
.directive('isolatedDirective', function isolatedDirective(){
var directive = {
scope: {
bindingFromAttr: '=',
},
controller: function directiveController($scope){
$scope.test2 = 'Binded from directive controller!';
},
};
return directive;
})
.directive('isolatedDirectiveNumberTwo', function isolatedDirective2(){
var directive = {
scope: {
bindingFromAttr: '=',
},
template:'<span ng-bind="bindingFromAttr"></span>\
<span ng-bind="test2"></span>',
controller: function directiveController($scope){
$scope.test2 = 'Binded from directive controller!';
},
};
return directive;
})
test1
Associated with the parent controller
test2
Associated with the parent controller
Connected to a directory controller!
I was expecting the result of test2 on test1.
Why is this happening?