用Ng-Repeat从指令观察控制器中函数的输出

时间:2015-12-24 05:43:38

标签: javascript angularjs

我很难获得一个自定义指令来观察绑定到控制器中作用域的函数的结果。

这是html。我将ng-repeat的密钥传递给控制器​​中的函数,以确定此元素是否处于活动状态。

<div ng-repeat="(key, value) in myArray" my-custom-directive element-is-active="elementIsActive(key)">
</div>

这是控制器中的相关代码。根据用户的输入,该函数返回true或false,指示元素是否被选中。

$scope.elementIsActive = function (key) {
    if(key===$scope.selectedElement) {
        return true;
    }
    return false;
}

如果此元素处于活动状态,我想使用custom指令中的功能。这是自定义指令:

myAngularModule.directive('myCustomDirective', function (){

    function link (scope, element, attrs)  {

        scope.$watch(scope.active(), function (){
            console.log("triggered");
        });

    }

    return {
        link:link,
        scope: {
            active: "&elementIsActive"
        }
    }

})

我无法让$watch工作。 "triggered"仅在加载时输出一次,然后它似乎停止$watch,尽管函数的输出正在改变。

1 个答案:

答案 0 :(得分:2)

如果您想要查看范围内的属性,请轻松执行以下操作:

scope.$watch('active', function (){

正如您已经在element-is-active="elementIsActive(key)"中调用函数一样,您可以将其返回值作为范围中的正常变量:

return {
    link:link,
    scope: {
        active: "=elementIsActive"
    }
}

看看this plunker