Question

我试图设置一些具有父/子层次结构的指令，并且我遇到了一些问题，了解如何使用嵌套指令处理作用域。最后，我希望让一个子指令响应父指令范围的变化。这是我的例子，也是jsfiddle（http://jsfiddle.net/4rt3b/48/）

HTML：

<div ng-app='app' ng-controller='MainCtrl'>
    Radius : <input ng-model='myRadius' ng-init="myRadius=100"/>
    <parent radius="myRadius">
        <child  pi="3.14"></child>
    </parent>
</div>

JS

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

app.controller('MainCtrl',  function($scope){

});

app.directive('parent', function(){
    return {
        restrict : "AE",
        replace : true,
        transclude : true,
        scope : {
            radius : "="
        },
        template : "<div>Parent controller's radius is {{radius}}<div ng-transclude></div></div>",
        controller : function($scope){
            this.getRadius = function(){
                return $scope.radius;
            }
        }
    }
})

app.directive('child', function(){
    return {
        restrict : "AE",
        require  : "^parent",
        replace : true,
        scope : {
            pi : "="
        },
        template : "<div>Child directive's pi is {{pi}} and area is {{area}}</div>",
        link: function(scope, elem, attr, parentCtrl){
            // This works
            scope.area = 2 * scope.pi * parentCtrl.getRadius();

            // This never seems to trigger
            scope.$watch('parentCtrl.getRadius()', function(newVal){
                if (newVal){
                    scope.area=2 * scope.pi * newVal;
                }
            })
        }
    }
})

以下是我的问题：

似乎没有一种方法可以让子指令从父指令继承范围。我尝试将范围声明从isolate更改为true等，但仍然无法在子连接函数中引用radius变量。有没有办法做到这一点？
我最终使用require参数从父指令到子指令共享控制器。这似乎有效，但是，我似乎无法观察父母的变化。输入radius的值，您就会看到该区域未更新。我怎样才能观察父指令模型的变化？

谢谢！

Answer 1

想出来。观察者需要像这样声明：

scope.$watch(
    function(){
        return parentCtrl.getRadius();
    }, 
    function(newVal){
        if (newVal){
            scope.area=2 * scope.pi * newVal
        }
})

Answer 2

您也可以在父控制器中设置一个方法，以便通过引用传递子范围作为参数。父控制器中的方法只是将子范围分配给其范围的属性，即。 scope.child_scope。然后，将$ watch保留在父控制器中并设置scope.child_scope.area = scope.child_scope.pi * newVal（在此$ watch中）。

嵌套指令，范围继承以及父和子之间的值

2 个答案: