angularjs - isolated scope "=" affects parent scope -
in directive, define scope:{isonetwork:'=network'}, if parent scope has no 'network' property, auto create it? following pic parent scope:
here code example(same in jsfiddle:http://jsfiddle.net/yougen/mvyrj/7/):
var app = angular.module('app',[]) app.controller('appctrl', function($scope){ $scope.leavevoicemail = function(number, message, network){ console.log("controller scope: ", $scope); window.alert("number: " + number + " said: " + message + ", network: " + network); }; }); app.directive('phone', function(){ return { restrict:'e', scope:{ isolatedattributenumber:'@number', isonetwork:'=network', makecall:'&' }, link:function(scope){ scope.networks = ["verizon", "at&t", "sprint"]; scope.isonetwork = scope.networks[1]; } }; });
html:
<div ng-app="app" ng-controller="appctrl"> <phone number="555-1234" network="network" make-call="leavevoicemail(number, message, network)"> <div> number:{{isolatedattributenumber}} network:<select ng-model="isonetwork" ng-options="net net in networks"></select> </div> message:<input type="text" ng-model="voicemessage"><br> <button class="btn" ng-click="makecall({number: isolatedattributenumber, message: voicemessage, network: isonetwork})">call home!</button> </phone> </div>
yes. how =
bindings in isolate scope work. directive gets own scope, still need way of communicating outside scope (not "parent" scope since directive's scope isolated).
the =
binding provides two-way binding outside. so, when bound model in directive <phone nework="network" ...
, telling angular set network
value in controller's scope. happens inside link
function when set isonetwork
.
if looking one-way binding, consider @
binding, one-way string binding, different =
binding two-way reference.
Comments
Post a Comment