Question

我需要一个自定义click指令，它使用scope执行传递的代码。$ apply（）。

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

如果我传递类似wd-click =＆＃34; something =！something＆＃34;的内容，这样可以正常工作。但是当我尝试调用$ 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

您应该将代码包装在function（）{}

中

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

Answer 3

你想在另一个控制器中调用你的rootcope方法吗？如果我理解正确，请尝试使用这种方式：

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而不是范围属性？此外，您应该使用$ 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);
        });
    }
}

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

4 个答案: