AngularJS：將屬性添加到ng-repeat內部的指令元素不起作用

我有一個指令，在單獨使用時可以正常工作，但是當它在ng-repeat內部使用時，它將停止工作。我知道ng-repeat會創建它自己的隔離範圍，但這不應該成問題，因爲我不想在我的指令的隔離範圍之外做任何事情。我已經創建了一個運動員來展示你可以在這裏看到的問題：http://plnkr.co/edit/Y4ADmznnDCZvuxJrcZQ0?p=preview。AngularJS：將屬性添加到ng-repeat內部的指令元素不起作用

在指令的編譯函數中，我將一個ng-click屬性添加到元素中。請注意，「This works」鏈接（不在ng-repeat中）工作正常，但其他鏈接（在ng-repeat內部）不起作用。

下面是從plunker指令：

var app = angular.module('plunker', []); 
app.controller("AppCtrl", function($scope) { 
    $scope.users = [{ 
    name: 'John', 
    id: 1 
    }, { 
    name: 'anonymous' 
    }]; 
}); 
app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 
     el.attr('ng-click', 'fxn()'); 
     var fn = $compile(el); 
     return function(scope){ 
     fn(scope); 
     }; 
    } 
    }; 
}) 
.controller("directiveController", function($scope) { 
    $scope.fxn = function() { 
     alert('It works'); 
    }; 
});

這裏是HTML：

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div> 
     <a my-dir>This works</a> 
     <a my-dir ng-repeat="id in [1,2]"><br>This does not work</a> 
    </div> 
    </div> 
    </body> 

</html>

來源

2014-12-27 Jim Cooper

與結合在鏈接功能的事件，而不是添加具有另一個屬性試試吧被編譯（DEMO）：

app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 

     var fn = $compile(el); 
     return function(scope, el){ 
     el.bind('click', scope.fxn); 
     fn(scope); 
     }; 
    } 
    }; 
})

來源

2014-12-27 21:12:52

謝謝，@ marcel-gwerder，確實有效，但是，它這是一個讓我無法工作的問題。爲了這個問題，我已經過分簡化了我的Plunker。我真正需要的是在父控制器上調用一個函數。所以，雖然這工作，我可以得到它調用父方法（通過傳入隔離作用域），我無法弄清楚如何傳遞參數。這是一個更新的Plunker顯示問題：http://plnkr.co/edit/uRGkoh4qrYQhDxi2OlP8?p=preview。謝謝！ – 2014-12-28 00:20:32

你能告訴我爲什麼你需要所有的指示性的東西，而不僅僅是：'
{{user.name}}'？ – 2014-12-28 00:33:01

這是爲了解決這個問題而簡化的大型應用程序的一部分。我有一個窗體指令，它有一個form-page指令，它具有多個表單行指令，並且具有多個表單列指令。當用戶點擊表單列時，我需要通知外部表單並將該列傳遞給表單控制器中的方法。 – 2014-12-28 02:34:31

AngularJS：將屬性添加到ng-repeat內部的指令元素不起作用

回答

相關問題