Angular-控制器作为vm

Angular - Controller as vm

本文关键字：vm 控制器 Angular-      更新时间：2023-09-26

试图养成使用控制器作为语法的习惯，但在尝试一个简单的示例时似乎缺少了一些东西。

当尝试设置类似vm.name="John"的属性时，当使用｛｛vm.name｝｝时，它不会显示在我的视图中。

代码是这样

控制器

(function() {
'use strict';
angular
    .module('myApp')
    .controller('HomeController', HomeController);
HomeController.$inject = ['dataService'];   
function HomeController(dataService) {

    var vm = this;
    vm.data = {};
    vm.name = 'Richard';
}

路由

'use strict';
angular
    .module('myApp')
    .config(function($routeProvider) {
    $routeProvider.when(
        '/view1', 
        {
            templateUrl: 'partials/partial1.html', 
            controller: 'HomeController',
            controllerAs: 'vm'
        });
    $routeProvider.when(
        '/view2', 
        {
            templateUrl: 'partials/partial2.html'
        });
    $routeProvider.otherwise(
        {
            redirectTo: '/view1'
        });
});

查看

<p>View 1</p>
<h1>Hello {{ vm.name }}</h1>

不确定您使用的角度版本是否超过1.3，以下是正在工作的Plunker

你的家庭控制器应该像这样改变，

app.controller("HomeController", function(){
    this.name="Richard";
});

使用$scope。我认为它会起作用。编写代码：

function HomeController(dataService) {
var vm = this;
vm.data = {};
vm.name = 'Richard';}

使用$scope，试试这个：

function HomeController($scope, dataService) {
$scope.data = {};
$scope.name = 'Richard';}

查看

<p>View 1</p>
<h1>Hello {{name}}</h1>

也请阅读这篇文章！！！

您需要在$scope对象上声明变量以实现双向绑定。否则它只是一个常规的javascript变量。范围就像angularjs中视图和控制器之间的粘合剂。阅读此处。

我唯一能看到的问题是你没有包含ngRoute模块。。。

 var app = angular.module('plunker', [
  'ngRoute'
 ]);

或者您的数据服务没有作为脚本包含，这会导致注入失败。根据您提供的信息，我使用视图模型概念而不是$scope为您创建了一个工作plunkr。

以下是angulars的最佳实践，其中有一些关于使用视图模型概念的非常有用的信息和示例，以及许多其他信息Angular Guide

相关文章：