Question

我的指令源代码如下所示：

var app = angular.module("myApp", ["mytemplate.html"])
var thai =  angular.module("mytemplate.html", []).run(['$templateCache',
  function ($templateCache) {
    $templateCache.put('mytemplate.html', '<ul ng-if="true"> <li> <a ng-click="next()" href="javascript:void(0)">&raquo;</a> </li> </ul>');
  }
]);

thai.directive('myTop',function() {
return {
    restrict: 'A',
    replace: false,
    scope: {

    },
    templateUrl: 'mytemplate.html',
    link: function (scope) {
        scope.next = function () {
            alert('Hello!');
        };
    }
}
});

这是JSFiddle。

当我点击＆＃34;＆gt;＆gt;＆＃34;按钮，效果很好（警报＆＃34;你好＆＃34;）。但是，如果我将指令中的replace值从false更改为true（并点击小提示中的更新代码），则警报将不再有效。

我认为范围是分离的，但我不知道为什么？你能告诉我这里的原因吗？非常感谢！

Answer 1

您分配给锚点中的href的javascript函数是问题所在。无论这里的替换值如何，它都可以工作。 https://jsfiddle.net/wxeumcy6/2/

为什么这会阻止它工作，我不完全确定。但对于锚点，你可以正常说db.categories.aggregate([{$group : {category : {your condition} }, price: {$sort : { price: 1 } },}}])或href=""。

Answer 2

如果您设置thai.directive('myTop',function() { return { restrict: 'A', replace: false, scope: false, templateUrl: 'mytemplate.html', link: function (scope) { scope.next = function () { alert('Hello!'); }; } } });，则会解决您的问题。

scope: {}

您有ng-if创建了隔离范围。这导致模板中的{{1}}指令出现问题。

Angular指令范围与替换值的工作方式不同

2 个答案: