0

第一指令：

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")
}

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

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

html代码：

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

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

4

2 回答 2

1

问题是 ng-repeat 创建了一个子范围，因此editFunction最终位于父范围内。

来自文档

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

文档在这里

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

尽管考虑了代码异味，但您可以将 $parent 附加到您的函数调用以访问它，但请记住，这现在对您的 HTML 结构产生了依赖性。

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

于 2018-05-23T08:33:11.810 回答
0

问题是我使用的是不推荐使用的方法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了它现在很好:)

这是链接： 这里

于 2018-05-23T09:20:49.703 回答