Question

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

我的HTML代码，

  <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，

plunker

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

Answer 1

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

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

HTML：

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

MainCtrl：

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

plunker

Answer 2

让我们从您拥有的查询开始。即使范围是隔离的，您也想从指令内部的链接中调用函数。您想要访问父范围很简单。这是您可以用来访问父范围的代码。

    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();

    }

Answer 3

在你的app.directive中，只需添加scope : false。

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

angularjs如何在指令隔离范围中访问controller $ scope变量

3 个答案: