Question

鉴于此指令：

myApp.directive('someDirective', ['$compile', '$templateCache', function($compile, $templateCache) {

    return {
        restrict: 'A',

        link: function(scope, element, attr) {

            // Load a template.
            var template = $templateCache.get("partials/foo.html");

            $compile(template)(scope);
            $(element).append(template);

        }
    };

}]);

并给予foo.html：

<div data-foo>Some Text</div>

和foo指令：

myApp.directive('foo', [function() {

    return {
        restrict: 'A',

        link: function(scope, element, attr) {
            console.log('foo1');

            $(element).on('click', function() {
                console.log('foo2');
            });

        }
    };

}]);

我会在我的控制台中看到foo1，但是当我点击添加的元素时，我永远不会foo2。事实上，虽然我可以看到添加的元素很好并且可以console.log()它们就好了，但我无法将任何处理程序绑定到它们。我错过了什么？

Answer 1

除非你在里面放东西，否则div没有高度。将你的div更改为：

<div data-foo>Some content</div>

此外，您需要将模板设为元素，在创建后立即执行此操作：

template = angular.element(template);

这里有一个jsFiddle向您展示：http://jsfiddle.net/c3Wuu/

作为旁注，您不应该点击点击事件或构建这样的模板。看看一些视频并做角度教程，除非你知道你在做什么。

修改这就是你如何使用角度练习来连接它

在foo指令html中：

<div data-foo> <span data-ng-click="clickOne()">Click One</span> <span data-ng-click="clickTwo()">Click Two</span> </div>

在foo链接功能中：

scope.clickOne = function(){ console.log("click one"); }; scope.clickTwo = function(){ console.log("click two"); };

通过连接您自己的点击功能，您可以避开角度点。

缓存模板中的Angular指令未正确绑定

1 个答案: