CODEWITHSUNDEEP
angularjs
jason
jason

Reputation: 1631

isolated scope "=" affects parent scope

in the directive, define scope:{isoNetwork:'=network'}, if the parent scope has no 'network' property, it will auto create it? following pic is parent scope: enter image description here

here is the 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 + ", by 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 for net in networks"></select>
            </div>
            Your 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>

Upvotes: 1

Views: 376

Answers (1)

Brian Genisio
Brian Genisio

Reputation: 48147

Yes. That is how = bindings in the isolate scope work. The directive gets its own scope, but you still need a way of communicating with the outside scope (not "parent" scope since the directive's scope is isolated).

The = binding provides a two-way binding to the outside. So, when you bound your model in the directive <phone nework="network" ..., you are telling Angular to set the network value in your controller's scope. This happens inside your link function when you set isoNetwork.

If you are looking for a one-way binding, consider the @ binding, which is a one-way string binding, which is different from the = binding which is a two-way reference.

Upvotes: 2

Related Questions