Question

我有一个简单的父/子控制器设置如下：

<body ng-controller="ParentCtrl">

    <section my-directive></section>

    <div ng-controller="Child1Ctrl">
        <button ng-click="child1()">Click Child1</button>
    </div>

    <br>

    <div ng-controller="Child2Ctrl">
        <button ng-click="child2()">Click Child2</button>
    </div>

</body>

当我点击任一按钮时，从Child 1 Ctrl或Child 2 Ctrl，我希望更新my-directive中的范围。

myDirective.js

app.directive('myDirective', function () {

    var slider = {
        initial : function() {
            slider.clear();
            $scope.slideHide = false;
            $scope.slideShow = false;
        },
        clear: function() {
            $scope.slideMessage = '';
            $scope.slideError = false;
            $scope.slideSuccess = false;
        },
        error: function(message) {
            $scope.slideShow = true;
            $scope.slideError = true;
            $scope.slideMessage = message;
        },
        success: function(message) {
            $scope.slideShow = true;
            $scope.slideSuccess = true;
            $scope.slideMessage = message;
        }
    }

    return {
       restrict: 'A',
       replace: true,
       transclude: true,
       template: '<section class="slide">' +
                '<div data-ng-class="{\'slide-show\' : slideShow, \'slide-error\' : slideError, \'slide-success\' : slideSuccess, \'slide-hide\' : slideHide}">' +
                    '<p>{{ slideMessage }}</p>' +                           
                '</div>' +
            '</section>'
            }
        }
    );

在我的孩子控制器内打电话：

app.controller('Child1Ctrl', function($scope) {
    $scope.child1 = function () {

        $scope.$parent.slider.initialise();

    }
});

app.controller('Child2Ctrl', function($scope) {
    $scope.child2 = function () {

        $scope.$parent.slider.success('Display some text');

    }
});

用小提琴更新：

http://jsfiddle.net/6uub3jqx/1/

如果单击第一组按钮，则会出现红色/绿色色带。

如果单击带有child1 / 2控制器的按钮，则无法执行任何操作。

解决方案：

请参阅小提琴：http://jsfiddle.net/6uub3jqx/2/

基本上孩子应该发送：

$scope.successChild1 = function(msg) { 
    $scope.$emit('successCh1', 'Some data');
};

父母应该收到：

$scope.$on('successCh1', function (event, data) {
    $scope.$broadcast('success', data);
});

罗根是一个更好的选择吗？

Answer 1

这取决于。您可以使用Angular events或（IMO更好的方法）保留状态的服务，例如：

.factory('myOwnScope', function () {
    return {};
});

// include myOwnScope as dependency and share the information
// between controllers and directive by its properties
// (any Angular service is just a singleton)

Answer 2

有几种方法可以做到这一点。哪种方式最好取决于你想要达到的目标。

一种可能性是将数据注入您的指令。那么你不需要$ parent变量。

它会像这样（但不能保证它有效，因为你没有一个类似的东西）

在你的HTML中：

<section my-directive mytext="myobject.mymessage"></section>

在您的控制器中：

$scope.myobject = { mymessage: 'hi there' };

在你的指令中：

return {
   restrict: 'A',
   scope: { mytext: '=' }
   template: '{{mytext}}'
}

AngularJS：如何从子控制器更新指令范围

2 个答案: