angularjs中嵌套的directive之间如何进行scope通讯?

html代码

<div ng-controller="parentController">    
    <button-bar>
        <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
        <button class="primary">Primary2</button>
    </button-bar></div>

js代码

https://img2.mukewang.com/5b9b6e3c0001f47b05990369.jpg

https://img3.mukewang.com/5b9b6e460001768a06640226.jpg

scope: false下buttonBar和primary都能得到controller中的test=222,但是如何能在buttonBar中修改test,并使primary获取到修改后的值呢?

猛跑小猪
浏览 778回答 1
1回答

青春有我

如果你非要这么做的话,应该用引用类型:var&nbsp;testapp&nbsp;=&nbsp;angular.module('testapp',&nbsp;[]); testapp.controller('parentController',&nbsp;['$scope',&nbsp;'$window',&nbsp;function($scope,&nbsp;$window)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;console.log('parentController&nbsp;scope&nbsp;id&nbsp;=&nbsp;',&nbsp;$scope.$id); &nbsp;&nbsp;&nbsp;&nbsp;$scope.primary1Label&nbsp;=&nbsp;'Prime1'; &nbsp;&nbsp;&nbsp;&nbsp;$scope.test=&nbsp;{&nbsp;test2:&nbsp;222&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;$scope.onPrimary1Click&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$window.alert('Primary1&nbsp;clicked');&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}; }]); testapp.directive('primary',&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'C',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope:&nbsp;false,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function(scope,&nbsp;element,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(scope.test.test2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.addClass('btn&nbsp;btn-primary'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} }); testapp.directive('buttonBar',&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'EA',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;'<div&nbsp;class="span4&nbsp;well&nbsp;clearfix"><div&nbsp;class="pull-right"&nbsp;ng-transclude></div></div>',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transclude:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope:&nbsp;false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function(scope,&nbsp;element,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.test.test2&nbsp;=&nbsp;111;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//alert(scope.primary1Label); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}; });
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript