$ scope。$ apply（）不调用函数

Question

I have a need for a custom click directive, which executes the passed code using scope.$apply().

$(elem).on('click', function(){
    scope.$apply(attrs.wdClick);
});

This works fine if I pass something like wd-click="something = !something". But when I try to call a $rootScope function it does not work, however it does work when using the default ng-click.

wd-click="$root.someFunction()" //this does not call the function but ng-click does

I have tried updating the directive to make it work

$(elem).on('click', function(){
    $rootScope.$apply(attrs.wdClick);
});

But this does not work either. Any ideas?

Answer 1

attrs.wdClick is a string, so passing it to $apply won't do anything. To call the function you can pass the string to $eval

scope.$apply(function() {
  scope.$eval(attrs.wdClick)
});

Answer 2

You should wrap your code in function(){}

scope.$apply(function(){
    attrs.wdClick() // this is some sunction I suppose
});

Answer 3

Would you want to call your rootscope method in an another controller? If I understand correctly, try to use this way :

 angular.module('app', []) .controller('Ctrl', function Ctrl1($scope, $rootScope) { $rootScope.blah = 'Hello'; $scope.yah = 'World' }) .directive('myTemplate', function() { return { restrict: 'E', templateUrl: 'my-template.html', scope: {}, controller: ["$scope", "$rootScope", function($scope, $rootScope) { console.log($rootScope.blah); console.log($scope.yah); $scope.test = function(arg) { console.log(arg); } }] }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <div ng-app="app"> <div ng-controller="Ctrl"> <my-template></my-template> </div> <!-- my-template.html --> <script type="text/ng-template" id="my-template.html"> <label ng-click="test($root.blah)">Click</label> </script> </div> 

Also you can try on jsfiddle, http://jsfiddle.net/mg74b/24/

Answer 4

Is there a reason you are trying to use attrs instead of a scope property? Also, you should use $timeout instead of $apply.

angular
        .module('app', [])
        .directive('myDirective', myDirective);

myDirective.$inject = ['$timeout'];
function myDirective($timeout) {
    return {
        restrict: 'E',
        templateUrl: 'my-template.html',
        scope: {
            wdClick: '='
        },
        link: linkFn
    };

    function linkFn(scope, element) {
        element.on('click', function () {
            $timeout(scope.wdClick);
        });
    }
}