为什么我的指令的链接功能永远不会叫什么名字？ [英] Why does the link function of my directive never get called?

问题描述

我有这样的指令：

    hpDsat.directive('ngElementReady', [function() {
        return {
            restrict: "A",
            link: function($scope, $element, $attributes) {
                // put watches here.
                console.log(" WHAT THE @#%*%$??? ");
                $scope.$eval($attributes.ngElementReady);
            }
        };
    }]);

我从来没有看到的的console.log 的输出。我声明了一个元素是这样的：

I never see the output of the console.log. I'm declaring an element like this:

<div data-ng-element-ready="console.log(' ------------------------------- COMPILED! ')" data-ng-if="analysis.type" data-ng-show="showBasicHtml" data-ng-include="analysis.type+'Content.html'"></div>

是的，我宣布指令之前，我宣布在其下 DIV 元素存在控制器。该元素出现，ngShow和ngInclude的作品，并在装模板什么工作得很好，太（多指令，控制器，{{前pressions}}，等等）。

Yes, I am declaring the directive before I declare the controller under which the div element exists. The element appears, ngShow and ngInclude works, and anything in the loaded template works just fine too (more directives, controllers, {{expressions}}, etc).

如果我编译函数执行它，编译功能的确实的工作，但是依然没有链接功能：

If I execute it with a compile function, the compile function does work, but still not the link function:

    hpDsat.directive('ngElementReady', [function() {
        return {
            restrict: "A",
            compile: function($element, $attributes) {
                console.log("This I do see."); // THIS WORKS!!
                return function($scope) {
                    // put watches here.
                    console.log("But not this. Why???"); // DOESN'T WORK!!
                    $scope.$eval($attributes.ngElementReady);
                };
            }
        };
    }]);

编译函数的执行console.log工作正常，但返回的链接功能仍然没有得到执行。

The console.log of the compile function works fine, but the returned link function still never gets executed.

任何想法，为什么链接功能可能会被解雇？

Any idea why the link function might not get fired?

推荐答案

该错误可能是其他地方。我试了一下在的jsfiddle 和第一个版本的作品。

The error might be somewhere else. I tried it in a jsfiddle and the first version works.

的eval（）

在任何情况下，你可能有一个关于missunderstanding什么 $ $范围的eval（）所做的：

In any case, you might have a missunderstanding about what $scope.$eval() does:

$范围。$的eval（）评估针对范围angularjs code。 JavaScript的的eval（）函数运行在任意angularjs JS code是 $ window.eval（）。更多关于这这里：<一href=\"http://stackoverflow.com/questions/15671471/angular-js-how-does-eval-work-and-why-is-it-different-from-vanilla-eval\">Angular.js:如何$ EVAL工作，为什么香草EVAL不同？

$scope.$eval() evaluates angularjs code against a scope. JavaScript's eval() function to run arbitrary js code in angularjs is $window.eval(). More about this here: Angular.js: How does $eval work and why is it different from vanilla eval?

我测试了从控制器分离指令：

I tested the directive isolated from the controller:

<div data-ng-element-ready="console.log('COMPILED!')"></div>

和指令：

app.directive('ngElementReady', ['$window', function($window) {
return {
    restrict: "A",
    link: function($scope, $element, $attributes) {
        console.log("Reached the link fn", $attributes);
        $window.eval($attributes.ngElementReady);
    }
};
}]);

我得到的值达到链接fn和 $属性是正确的：

Reached the link fn Object { $$element={...}, $attr={...},  
ngElementReady="console.log('COMPILED!')", more...}

和 $ window.eval（）收益编译！

和与控制器这里。

在任何情况下，使用的eval（）来执行用属性code看起来很危险。任何人都可以修改DOM运行code那里。至少确保它不会影响任何其他用户或服务器端。

in any case, using eval() to execute code written in an attribute looks dangerous. Anybody can modify the DOM to run code there. At least make sure that it won't affect any other users or server-side.

与重现问题NG-如果

第一个注释后编辑：
我试图使NG-如果前pression为false rel=\"nofollow\">
此时它不显示该消息。
这可能是因为为了NG-如果来评价，宥必须首先编译指令。否则，它只是code，它anuglarjs是不知道的。然而，因为它是从DOM移除，它永远不会到达链接功能

Edited after first comment: I tried making the ng-if expression evaluate to false here This time it doesn't show the message. This probably happens because in order to evaluate ng-if, yuo must compile first the directive. otherwise, it's just code that anuglarjs isn't aware of. However, because it is removed from the DOM, it never reaches the link function.

AngularJS的执行顺序的功能

在一般情况下，执行的顺序是这样的（乔希·戴维·米勒解释它：

In general, the order of execution goes like this (Josh David Miller explains it:

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>

现在AngularJS将按照一定的顺序运行指令功能创建指令：

Now AngularJS will create the directives by running directive functions in a certain order:

directive1: compile
  directive2: compile
directive1: controller
directive1: pre-link
  directive2: controller
  directive2: pre-link
  directive2: post-link
directive1: post-link

这篇关于为什么我的指令的链接功能永远不会叫什么名字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！