angularjs $将字符串解析为“控制器为”方法

How do I parse foo.callbacke to point to timerController.callbacke method?

如何解析foo.callbacke指向timerController.callbacke方法?

<div ng-app="timerApp" ng-controller="timerController as foo">
<div ng-repeat="item in [1,2,3,4]">
    <div watcher="{'seconds': 'foo.callbacke'}">
        {{seconds}}
    </div>
</div>

If you prefer: http://jsfiddle.net/e86e05a1/ (open console)

如果您愿意:http://jsfiddle.net/e86e05a1/(打开控制台)

2 个解决方案

#1

You this would be available inside your directive scope thats why directive can access controller method by $scope it self so there is no need to pass controllerAs alias here. Only pass method name here. Instead of accessing the function by index anotation try using $eval on scope.

你可以在你的指令范围内使用,这就是为什么指令可以通过$ scope自己访问控制器方法,因此不需要在这里传递controllerAs别名。这里只传递方法名称。而不是通过索引anotation访问函数尝试在范围上使用$ eval。

Note

You should use $observe unless you have interpolation on attribute like {{something}}

你应该使用$ observe,除非你对像{{something}}这样的属性进行插值

Markup

<div watcher="{'seconds': 'callbacke'}">

Code

angular.forEach(new_watchers, function(callback, k) {
     watchers.push($scope.$watch(k, function() {
         return $scope.$eval(callback)($scope, $element);
     }));
});

Demo Fiddle

#2

You cannot pass a function reference to directive in that way. What you can do it create a isolated scope in the directive and map the parent controller's function to the directive scope using =. Try this.

您不能以这种方式将函数引用传递给指令。你可以做什么在指令中创建一个独立的范围,并使用=将父控制器的函数映射到指令范围。试试这个。

Html

<div callbacke="callbacke" watcher>
    {{seconds}}
</div>

.directive('watcher', ['$compile', '$parse', function($compile, $parse) {
    'use strict';

    return {
        restrict: 'A',
        transclude: false,
        scope: {
            callbacke: '='
        },
        controller: ['$scope', '$element', '$attrs', function($scope, $element, attrs) {
            var watchers = [];
            console.log($scope.callbacke);
            ...
            ...
        }]
        ...
        ...
    };
}]);

Demo http://jsfiddle.net/e86e05a1/1/

#1