Question

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

尝试设置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>

Answer 1

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

你的HomeController应该像这样改变，

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

Answer 2

使用$ 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>

请阅读this文章!!!

Answer 3

您需要在$ scope对象上声明变量以实现双向绑定。否则它只是一个常规的javascript变量。范围就像是视角和控制器之间的胶水。Read Here。

Answer 4

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

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

或您的dataservice不包含在使注入失败的脚本中。根据您所包含的信息，我使用视图模型概念而不是$ scope为您创建了一个工作plunkr。

Heres angulars最佳做法，其中包含一些非常有用的信息和使用视图模型概念的示例，并附有大量其他信息Angular Guide

角度 - 控制器为vm

4 个答案: