My goal is to achieve two-way binding of a directive's scope in a simple manner. Essentially, I have a Parent controller named ParentCtrl with $scope.name='Foo', and a directive with scope: {name: '='}. I expect that if I change scope.name='Bar' within the directive's link function or $scope.name='Bar' from the directive's controller, the template for ParentCtrl should reflect the new value of $scope.name. However, it seems like it's only one way bound from the parent scope to the directive's scope. Am I overlooking something? You can see the issue illustrated in this Plunker link:
http://plnkr.co/edit/VeGvWV2AGftFHF0LhnBY?p=preview
Here's the code:
angular.module('docsSimpleDirective', [])
.controller('ParentCtrl', ['$scope', function($scope) {
$scope.name = "Bernie Sanders";
$scope.occupation = "Arsonist";
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{name}} Occupation: {{occupation}}',
scope: {
name: '=',
occupation: '='
},
link: function(scope, element, attrs) {
scope.name = "Donald Drumpf";
scope.occupation = "Fascist pig";
scope.$apply();
}
};
});
Template used:
<body ng-app="docsSimpleDirective" ng-controller="ParentCtrl">
Name: {{name}}, Occupation: {{occupation}}<br />
<div ng-controller="ParentCtrl">
<div my-customer name="name" occupation="occupation"></div>
</div>
</body>