AngularJS 如何访问指令隔离作用域中的控制器$scope变量

在angularjs中，我一直在尝试访问我的指令隔离范围内的主控制器$scope变量。

我的网页代码，

  <body ng-controller="MainCtrl">
    <div id="TestContainer" class="TestContainer" ng-init=Intialfunc()>
             <collection collection='testdata'>{{testdata}}</collection>             
        </div>
  </body>

我的指令代码，

    var app = angular.module('plunker', []);
app.directive('collection', function () {       
    return {
        restrict: "E",
        replace: true,
        scope: {collection: '='},
        //controller: 'TreeController',
        //bindToController: true,       
        template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"         
    }
})
app.directive('member', function ($compile) {
    var linkerfunc = function(scope, element, attrs) {  
                    var collectionSt = '<collection collection="member.children"></collection>';
                    $compile(collectionSt)(scope, function(cloned, scope)   {                                           
                        element.append(cloned); 
                     });                    
    }
    return {
        restrict: "E",
        replace: true,
        scope: {member: '=', ShowDetailsCtrlFunc : '&'},
        template: "<li><span ng-click=ShowDetailsCtrlFunc()>{{member.NodeName}}</span></li>",       
        controller: 'MainCtrl',
        //controllerAs: 'MainCtrl',
        //bindToController: true,
        link: linkerfunc        
    }
})

我的控制器代码，

app.controller('MainCtrl', function ($scope) {      
    $scope.Intialfunc = function() { 
        $scope.testdata = []
        var myjsondata = JSON.parse('{ "NodeName": "Parent", "children": [ { "NodeName": "mychild", "children": [ { "NodeName": "chld1", "children": [] } ] } ] }');
        $scope.testdata.push(myjsondata);
            console.log($scope.testdata) //This one is showing
        }       
    $scope.ShowDetailsCtrlFunc = function(element,event) {
            console.log("in function ShowDetailsCtrlFunc"); // coming to this fucntion on click.        
            console.log($scope.testdata) // but this one is not showing . shows undefined.
            //event.stopImmediatePropagation();         
      };
});

它即将进入该功能，但不显示控制器$scope。我创建了一个 plunker，

普伦克

请帮助我。我已经挣扎了很多天。

您需要将函数表达式添加到两个指令的隔离作用域，以便正确调用父作用域中的函数。使用您的原始代码，它应该看起来像这样：

var app = angular.module('plunker', []);
app.directive('collection', function () {       
    return {
        restrict: "E",
        //replace: true, <- this is deprecated and should no longer be used
        scope: {
            collection: '=',
            onMemberClick: '&'
        },      
        template: "<ul><member ng-repeat='member in collection' member='member' on-click='onMemberClick()'></member></ul>"         
    }
})
app.directive('member', function ($compile) {
    return {
        restrict: "E",
        //replace: true, <- this is deprecated and should no longer be used
        scope: {
            member: '=', 
            onClick : '&'
        },
        template: "<li><span ng-click='onClick()'>{{member.NodeName}}</span></li>"       
    }
});

你的原始html应该看起来像这样：

<body ng-controller="MainCtrl">
  <div id="TestContainer" class="TestContainer" ng-init=Intialfunc()>
    <collection collection='testdata' on-member-click='ShowDetailsCtrlFunc ()'>{{testdata}}</collection>             
  </div>
</body>

参数绑定

如果你想知道哪个成员被点击了，你需要将参数绑定到你的函数调用。

var app = angular.module('plunker', []);
app.directive('collection', function () {       
    return {
        restrict: "E",
        scope: {
            collection: '=',
            onMemberClick: '&'
        },      
        template: "<ul><member ng-repeat='member in collection' member='member' on-click='onMemberClick({member: member})'></member></ul>"         
    }
})
app.directive('member', function ($compile) {
    return {
        restrict: "E",
        scope: {
            member: '=', 
            onClick : '&'
        },
        template: "<li><span ng-click='onClick({member: member})'>{{member.NodeName}}</span></li>"       
    }
});

<body ng-controller="MainCtrl">
  <div id="TestContainer" class="TestContainer" ng-init=Intialfunc()>
    <collection collection='testdata' on-member-click='ShowDetailsCtrlFunc (member)'>{{testdata}}</collection>             
  </div>
</body>

主控制：

app.controller('MainCtrl', function ($scope) {      
    $scope.Intialfunc = function() { 
        $scope.testdata = []
        var myjsondata = JSON.parse('{ "NodeName": "Parent", "children": [ { "NodeName": "mychild", "children": [ { "NodeName": "chld1", "children": [] } ] } ] }');
        $scope.testdata.push(myjsondata);
            console.log($scope.testdata) //This one is showing
        }       
    $scope.ShowDetailsCtrlFunc = function(member) {
            console.log("In show details function");
            console.log(member);       
      };
});

普伦克

让我们从您拥有的查询开始。您希望从指令内的链接调用函数，即使作用域是隔离的。想要访问父范围很简单。下面是可用于访问父范围的代码。

    scope.$parent.yourFun();
    //or you can do this by the code give below.
    //Inside Directive Use this.
    scope:{
        fun:"&"
    },
    //now you can call this function inside link
    link:function(scope, element,attr){
        scope.fun();
    }

在你的app.directive中，只需输入scope : false .

您的指令将使用与其父范围相同的作用域。

相关内容

最新更新

热门标签：