<div ng-app="drinkApp">
<div ng-controller="AppCtrl">
<div drink flavor="ctrlFlavor"></div>
</div>
</div>
var app = angular.module('drinkApp', []);
app.controller("AppCtrl", function ($scope) {
$scope.ctrlFlavor = "blackberry";
})
app.directive("drink", function () {
return {
scope: {
flavor: "="
},
template: '<div>{{ flavor }}</div>',
};
});
Unlike the @ operator, which expects a string attribute, the = operator expects an object which it can bind to. A binding is set up both ways, so that an template with an <input> will bind to the controller object, allowing modification. Thus,
<div ng-app="drinkApp">
<div ng-controller="AppCtrl">
<input type="text" ng-model="ctrlFlavor"> <!-- Ctrl -->
<div drink flavor="ctrlFlavor"></div> <!-- Dir -->
</div>
</div>
template: '<input type="text" ng-model="flavor">',
This yields two inputs which are bound to their respective models. The Ctrl input is bound normally to the ctrlFlavor model. The drink directive input is invoked with the ctrlFlavor object as the flavor parameter. The scope binding is a mutual equivalence from the = operator, so each input will modify the other’s model value.
There's more to learn!