在 AngularJS 中，controllerAs 语法是一种更加优雅和可读性更高的方式来管理控制器。它能够将控制器的作用域显式地暴露给模板，从而使代码更加易于维护和理解。然而，在使用 controllerAs 语法的过程中，也会遇到一些问题和坑点，本文将对这些问题进行详细的解析和说明，并提供相应的解决方案和指导意义。
问题一：controllerAs 和 $scope 的关系
在使用 controllerAs 语法时，我们通常会将控制器的作用域绑定到一个变量上，如下所示：
angular.module('myApp', [])
.controller('MyCtrl', function() {
var vm = this;
vm.name = 'John';
});在模板中，我们可以通过 vm.name 来访问控制器中的属性。然而，这并不意味着 $scope 对象被完全取代了。实际上，我们仍然可以使用 $scope 来访问控制器中的属性和方法，如下所示：
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
var vm = this;
vm.name = 'John';
$scope.$watch('vm.name', function(newValue, oldValue) {
console.log('Name changed from ' + oldValue + ' to ' + newValue);
});
});在这个例子中，我们使用 $scope.$watch 来监视 vm.name 属性的变化，并在控制台中输出变化的信息。这表明，controllerAs 和 $scope 并不是互斥的，它们可以同时存在并相互作用。
问题二：controllerAs 和 ng-controller 的关系
在使用 controllerAs 语法时，我们通常会将控制器的作用域绑定到一个变量上，如下所示：
<div ng-controller="MyCtrl as vm">
{{vm.name}}
</div>在这个例子中，我们使用 ng-controller 指令来声明控制器，并将其作用域绑定到 vm 变量上。这种方式可以使模板更加清晰和易于理解，但是它也会带来一些问题。
首先，ng-controller 指令会在模板中创建一个新的作用域。这意味着，如果我们在控制器中定义了一个属性或方法，它并不会自动地绑定到父作用域上。如果我们需要将这些属性或方法绑定到父作用域上，我们就需要使用 $scope 对象来实现，如下所示：
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
var vm = this;
vm.name = 'John';
$scope.someMethod = function() {
console.log('Hello, world!');
}
});在这个例子中，我们使用 $scope.someMethod 来将控制器中的方法绑定到父作用域上。这样，我们就可以在模板中通过 ng-click 等指令来调用该方法了。
其次，ng-controller 指令会在模板中创建一个新的 DOM 元素。这意味着，如果我们在控制器中定义了一些 DOM 操作，它们并不会自动地应用到 ng-controller 指令所在的元素上。如果我们需要将这些 DOM 操作应用到 ng-controller 指令所在的元素上，我们就需要使用 $element 对象来实现，如下所示：
angular.module('myApp', [])
.controller('MyCtrl', function($element) {
var vm = this;
vm.name = 'John';
$element.addClass('active');
});在这个例子中，我们使用 $element.addClass 来将控制器中的 DOM 操作应用到 ng-controller 指令所在的元素上。这样，我们就可以对该元素进行样式和行为的控制了。
问题三：controllerAs 和 ui-router 的关系
在使用 ui-router 时，我们通常会使用 stateProvider.state 方法来定义一个状态，并将控制器的作用域绑定到一个变量上，如下所示：
// www.javascriptcn.com code example
angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl as vm'
});
})
.controller('HomeCtrl', function() {
var vm = this;
vm.name = 'John';
});在模板中，我们可以通过 vm.name 来访问控制器中的属性。然而，这也会带来一些问题。
首先，ui-router 会在模板中创建一个新的作用域。这意味着，如果我们在控制器中定义了一个属性或方法，它并不会自动地绑定到父作用域上。如果我们需要将这些属性或方法绑定到父作用域上，我们就需要使用 $scope 对象来实现，如下所示：
// www.javascriptcn.com code example
angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl as vm'
});
})
.controller('HomeCtrl', function($scope) {
var vm = this;
vm.name = 'John';
$scope.someMethod = function() {
console.log('Hello, world!');
}
});在这个例子中，我们使用 $scope.someMethod 来将控制器中的方法绑定到父作用域上。这样，我们就可以在模板中通过 ng-click 等指令来调用该方法了。
其次，ui-router 会在模板中创建一个新的 DOM 元素。这意味着，如果我们在控制器中定义了一些 DOM 操作，它们并不会自动地应用到 ui-router 所创建的元素上。如果我们需要将这些 DOM 操作应用到 ui-router 所创建的元素上，我们就需要使用 $element 对象来实现，如下所示：
// www.javascriptcn.com code example
angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl as vm'
});
})
.controller('HomeCtrl', function($element) {
var vm = this;
vm.name = 'John';
$element.addClass('active');
});在这个例子中，我们使用 $element.addClass 来将控制器中的 DOM 操作应用到 ui-router 所创建的元素上。这样，我们就可以对该元素进行样式和行为的控制了。
解决方案和指导意义
在使用 controllerAs 语法时，我们需要注意以下几点：
- controllerAs 和 $scope 并不是互斥的，它们可以同时存在并相互作用。
- ng-controller 指令会在模板中创建一个新的作用域和 DOM 元素。如果我们需要将控制器中的属性、方法和 DOM 操作绑定到父作用域和 DOM 元素上，我们就需要使用 $scope 和 $element 对象来实现。
- ui-router 会在模板中创建一个新的作用域和 DOM 元素。如果我们需要将控制器中的属性、方法和 DOM 操作绑定到父作用域和 ui-router 所创建的元素上，我们就需要使用 $scope 和 $element 对象来实现。
综上所述，controllerAs 语法是一种更加优雅和可读性更高的方式来管理控制器。在使用它时，我们需要注意控制器的作用域和 DOM 元素的创建方式，以便正确地绑定属性、方法和 DOM 操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d40ed9a941bf71347b007a