Question

第一指令：

app.directive("myDirectiveOne", function($rootScope){
    return {
        templateUrl : "/custom-one-html.html",
        restrict: "AE", 
        replace:true,
        scope: {
            somedata: "=",
            flags: "=",
            functionone: "&"
        }
        ,controller: function($rootScope,$scope, $element) {
           $scope.firstFunction = function(){
                console.log("First function is getting called")
           }
$scope.$on('firstBroadcast',function(event, data){
                $rootScope.$broadcast('secondBroadcast', data)
            });

    }

第二指令：

app.directive("myDirectiveTwo", function($rootScope){
    return {
        templateUrl : "/custom-two-html.html",
        restrict: "AE", 
        replace:true,
        scope: {
            data: "=",
            functiontwo: "&"
        }
        ,controller: function($rootScope,$scope, $element) {
           $scope.secondFunction = function(){
                console.log("Second function is getting called")
                $rootScope.$broadcast('firstBroadcast', {})
           }
$scope.$on('secondBroadcast',function(event, data){
                $scope.callSomeFunctionWithData(data);
            });
$scope.secondFunction();

    $scope.editFunction = function(x){
console.log("This is the edit function", x);
        }

家长控制器：

$scope.parentFuntion = function(){
        console.log("No trouble in calling this function")
}

所以，问题是当我尝试从myDirectiveTwo html模板调用函数时，处于活动状态的控制器是父控制器而不是隔离控制器。

可能与我正在使用的广播有关吗？

Html代码：

<div ng-repeat="x in data">
    <h5>{{x.name}}</h5>
    <button ng-click="editFunction(x)">Edit</button>
</div>

奇怪的是我获取数据值并且ng-repeat在加载时工作正常。但是，当我点击按钮时，它什么也没做。如果我在父控制器中添加相同的功能，它会被调用.. :( 如何使隔离的示波器控制器再次激活..？

Answer 1

问题是ng-repeat会创建子范围，因此editFunction最终会在父范围内。

来自docs

...每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项...

Docs here

您可以通过获取按钮元素的范围并检查$ parent来验证这是否是问题，angular.element(document.getElementsByTagName("button")).scope()

虽然被认为是代码嗅觉，但您可以将$ parent附加到函数调用中以便访问它，但请记住，这现在会依赖于HTML结构。

<button ng-click="$parent.editFunction(x)">Edit</button>

Answer 2

问题是我使用了弃用的方法replace:true。这引起了意想不到的情况..正如@Protozoid建议的那样，我查看了他的链接，发现了问题..引用官方文档：

When the replace template has a directive at the root node that uses transclude: element, e.g. ngIf or ngRepeat, the DOM structure or scope inheritance can be incorrect. See the following issues: Incorrect scope on replaced element: #9837 Different DOM between template and templateUrl: #10612

我已删除replace:true ，现在很好：）

这是链接： Here

无法访问角度指令的隔离范围

2 个答案: