将控制器的 $scope 变量传递给嵌套指令的控制器

Question

我在将范围对象从一个控制器传递到嵌套指令的控制器时遇到问题。我在另一个指令（父）中有一个指令（子），父指令及其控制器如下所示：

myApp.directive('parent', function(){
    return {
        restrict : 'E',
        scope:false,
        controller: 'parentController',
        templateUrl : '/templates/parent.html',
    };
});

myApp.controller('parentController', ['$scope',
function Controller($scope) {
    $scope.monitors=[monitor1,monitor2,monitor3]; //in reality these are JSON objects
}

我的 'parent.html' 模板如下所示：

<div>
    <!-- Other things go here -->
    <div ng-repeat='monitor in monitors'>
        <child monitorData='monitor'></child>
    </div>
</div>

子指令及其控制器如下所示：

myApp.directive('child', function(){
    return {
        restrict : 'E',
        scope:{
            monitorData:'=',
        },
        bindToController:true,
        controller: 'childController',
        templateUrl : '/templates/child.html',
    };
});

myApp.controller('childController', ['$scope', function ChildController($scope) {
    var vm=this;

    console.log('instantiated childController');
    console.log(vm);
}]);

控制台输出是这样的：

instantiated childController
ChildController
    monitorData : undefined

有什么想法吗？

Answer 1

使用 [=a19=] 代替 monitorData。

<div>
<!-- Other things go here -->
<div ng-repeat='monitor in monitors'>
    <child monitor-Data='monitor'></child>
</div>

From angular documentacion: Note: These =attr attributes in the scope option of directives are normalized just like directive names. To bind to the attribute in < div bind-to-this="thing">, you'd specify a binding of =bindToThis.

https://docs.angularjs.org/guide/directive

将控制器的 $scope 变量传递给嵌套指令的控制器

Passing Controller's $scope variable to nested directive's controller

data-binding

angularjs

angularjs-directive

angularjs-scope

angular-controller