隔离范围“=”影响父范围

时间:2013-08-28 09:10:34

标签: angularjs

在指令中

定义范围:{isoNetwork:'= network'},如果父范围没有'network'属性,它会自动创建吗? 以下图片是父母范围: enter image description here

这是代码示例(在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>

1 个答案:

答案 0 :(得分:2)

是。这就是隔离范围中=绑定的工作原理。该指令有自己的范围,但您仍然需要一种与外部范围通信的方式(而不是“父”范围,因为指令的范围是隔离的)。

=绑定提供与外部的双向绑定。因此,当您在指令<phone nework="network" ...中绑定模型时,您告诉Angular在控制器的范围中设置network值。当您设置link时,会在isoNetwork功能中发生这种情况。

如果您正在寻找单向绑定,请考虑@绑定,这是一种单向字符串绑定,它与=绑定不同,后者是双向绑定