AngularJS非$scope模式下控制器变量无法在指令中访问

嘿，我太懂你这个困扰了——想跟着最佳实践把$scope砍掉，结果控制器里定义的变量在指令模板里就是不显示，对吧？别慌，这其实是controllerAs语法的使用细节没踩对，我给你一步步理清楚：

问题根源 #

当你把变量绑定到控制器实例（this）上时，模板并不会自动知道要去控制器实例上找这个变量——默认情况下模板绑定的是作用域（$scope）。所以必须明确告诉模板：“去控制器的实例上找这个变量”，这就得靠controllerAs语法来实现。

解决方案步骤 #

1. 控制器里先把this存为变量（避免上下文混乱）

先把控制器的this赋值给一个固定变量（比如业内常用的vm，也就是ViewModel的缩写），再把变量挂在这个vm上：

angular.module('yourApp')
  .controller('TestController', function() {
    var vm = this;
    vm.testVariable = "终于能显示的变量啦！";
  });

2. 给控制器设置别名，让模板能找到它

分两种场景处理：

• 场景一：指令自己使用这个控制器
  在指令定义里加上controllerAs指定别名，模板里通过别名访问变量：

  angular.module('yourApp')
    .directive('testDirective', function() {
      return {
        restrict: 'E',
        controller: 'TestController',
        controllerAs: 'vm', // 给控制器实例起别名
        template: '<p>{{vm.testVariable}}</p>' // 通过别名访问变量
      };
    });
  

• 场景二：指令嵌套在控制器作用域下
  如果指令是放在用ng-controller="TestController as vm"的DOM元素里，只要指令没开隔离作用域，模板就能直接用父控制器的别名：
  页面代码：

  <div ng-controller="TestController as vm">
    <test-directive></test-directive>
  </div>
  

  指令模板（此时指令不需要自己声明控制器）：

  <p>{{vm.testVariable}}</p>
  

容易踩的坑点提醒 #

• 千万别漏写controllerAs：没设置别名的话，模板根本找不到控制器实例上的变量
• 别直接在控制器里嵌套函数用this：嵌套函数里的this上下文会变，所以一定要先把this存成vm再用
• 隔离作用域要单独处理：如果指令用了scope: {}（隔离作用域），默认访问不到父控制器的变量，得通过作用域绑定传递，比如：

  directive('testDirective', function() {
    return {
      restrict: 'E',
      scope: {
        testVar: '=' // 绑定父作用域的变量
      },
      template: '<p>{{testVar}}</p>'
    };
  });
  

  页面使用时要传值：<test-directive test-var="vm.testVariable"></test-directive>

按这个方法调整后，你的testVariable肯定能在指令模板里正常显示啦！

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