$ scope. $ Apply() не вызывающая функция

Question

Мне нужна специальная директива click, которая выполняет переданный код с использованием области. $ Apply().

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

Это прекрасно работает, если я передаю что-то вроде wd-click = "something =! Something". Но когда я пытаюсь вызвать функцию $ rootScope, она не работает, однако она работает при использовании стандартного ng-click.

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

Я попытался обновить директиву, чтобы сделать его работу

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

Но это не работает. Есть идеи?

Answer 1

attrs.wdClick является строкой, поэтому передавая его $apply ничего не будет делать. Для вызова функции вы можете передать строку в $eval

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

Answer 2

Вы должны обернуть свой код в функции() {}

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

Answer 3

Вы бы хотели назвать ваш метод rootscope в другой контроллер? Если я правильно понимаю, попробуйте использовать этот способ:

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>

Также вы можете попробовать на jsfiddle, http://jsfiddle.net/mg74b/24/

Answer 4

Есть ли причина, вы пытаетесь использовать AttrS вместо свойство scope? Кроме того, вы должны использовать $ timeout вместо $ 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); 
     }); 
    } 
}