javascript - angularjs中嵌套的directive之间如何进行scope通讯?
迷茫
迷茫 2017-04-11 10:56:26
0
1
136

html代码

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

js代码

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=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);
            element.addClass('btn btn-primary');
        }
    }
});

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

모든 응답(1)
伊谢尔伦

如果你非要这么做的话,应该用引用类型:

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: '<p class="span4 well clearfix"><p class="pull-right" ng-transclude></p></p>',
        replace: true,
        transclude: true,
        scope: false,       
        link: function(scope, element, attrs) {
                scope.test.test2 = 111;
                //alert(scope.primary1Label);
        }        
    };
});
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!