首頁(yè) 猿問(wèn) angularjs中嵌套的dire...

angularjs中嵌套的directive之間如何進(jìn)行scope通訊？

JavaScript

猛跑小豬 2018-08-10 06:05:10

html代碼<div ng-controller="parentController"> <button-bar> <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button> <button class="primary">Primary2</button> </button-bar></div>js代碼scope: false下buttonBar和primary都能得到controller中的test=222，但是如何能在buttonBar中修改test，并使primary獲取到修改后的值呢？

查看完整描述

1 回答

青春有我

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊

如果你非要這么做的話，應(yīng)該用引用類型：

var testapp = angular.module('testapp', []);

testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {    console.log('parentController scope id = ', $scope.$id);
    $scope.primary1Label = 'Prime1';
    $scope.test= { test2: 222 };
    $scope.onPrimary1Click = function() {
        $window.alert('Primary1 clicked');    
    };
}]);

testapp.directive('primary', function() {    return {        restrict: 'C',        scope: false,  
        link: function(scope, element, attrs) {
            alert(scope.test.test2);
            element.addClass('btn btn-primary');
        }
    }
});

testapp.directive('buttonBar', function() {    return {        restrict: 'EA',        template: '<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>',        replace: true,        transclude: true,        scope: false,       
        link: function(scope, element, attrs) {
                scope.test.test2 = 111;                //alert(scope.primary1Label);
        }        
    };
});

反對(duì) 回復(fù) 2018-09-14