I am currently working on a directive and controller setup, which I have mostly learned from the Angular JS Directives PacktPub book.
angular.module('myApp',[])
.directive('myIsolatedScopedDirective', function(){
return {
scope : {
'title' : '@msdTitle'
},
link: function ($scope, $element, $attrs) {
$scope.setDirectiveTitle = function (title) {
$scope.title = title;
};
}
};
})
.controller('MyCtrl', function($scope){
$scope.title = "Hello World";
$scope.setAppTitle = function(title){
$scope.title = title;
};
});
<div ng-controller="MyCtrl">
<h2>{{title}}</h2>
<button ng-click="setAppTitle('App 2.0')">Upgrade me!</button>
<div my-isolated-scoped-directive msd-title="I'm a directive within the app {{title}}">
<h4>{{title}}</h4>
<button ng-click="setDirectiveTitle('bob')">Bob it!</button>
</div>
</div>
However, I've encountered an issue that I would appreciate some clarification on:
Why does the <h4>{{title}}</h4> display "Hello World" instead of
"I'm a directive within the app Hello World"