AngularJS指令点击事件无法访问控制器$scope变量求助

咱们来一步步拆解你遇到的问题——其实你踩的是AngularJS指令作用域的一个常见误区，核心问题出在指令重复实例化控制器导致的作用域隔离上。

问题根源分析 #

你在member指令里加了controller: 'TreeController'，这会在指令的隔离作用域上重新创建一个全新的TreeController实例。而页面上你用来初始化$scope.testdata的是另一个独立的控制器实例：

• 页面上的控制器执行了Intialfunc，成功加载了$scope.testdata；
• 但指令内部的控制器实例根本没执行过Intialfunc，它的$scope.testdata自然是undefined；
• 更关键的是，你已经通过scope: {ShowDetailsCtrlFunc : '&'}把父控制器的函数绑定到了指令作用域，完全不需要在指令里再声明一次控制器。

具体修正方案 #

1. 移除指令中的重复控制器声明 #

修改member指令代码，删掉controller: 'TreeController'这一行，避免创建多余的控制器实例：

mainApp.directive('member', function ($compile) { 
  var NewChild = "<li><span ng-click=ShowDetailsFunc($event)>{{member.NodeName}}</span></li>"; 
  var linkerfunc = function(scope, element, attrs) { 
    var collectionSt = '<collection collection="member.children"></collection>'; 
    $compile(collectionSt)(scope, function(cloned, scope) { 
      element.append(cloned); 
    }); 
    scope.ShowDetailsFunc = function(event) { 
      // 用键值对对象传递&绑定的函数参数
      scope.ShowDetailsCtrlFunc({element: element, event: event}); 
    } 
  } 
  return { 
    restrict: "E", 
    replace: true, 
    scope: {member: '=', ShowDetailsCtrlFunc : '&'}, 
    template: NewChild, 
    // 移除这一行：controller: 'TreeController'
    link: linkerfunc 
  } 
})

2. 修正函数参数传递格式 #

AngularJS中&绑定的表达式函数，必须通过键值对对象传递参数，同时模板里的ng-click要把$event传进去，这样父控制器才能正确接收参数。

3. 确认父作用域关联 #

确保你的树形指令（<collection>）是放在ng-controller="TreeController"的DOM范围内，保证ShowDetailsCtrlFunc和$scope.testdata属于同一个控制器实例。

额外验证小技巧 #

你可以在父控制器的ShowDetailsCtrlFunc里打印console.log(this)，确认它指向的是页面上初始化数据的那个控制器实例，而不是指令内部的隔离作用域控制器。如果后续需要在指令里访问父作用域的其他变量，推荐通过作用域绑定（比如scope: {testdata: '='}）明确传递，比用$parent更清晰可控。

内容的提问来源于stack exchange，提问作者usersam