角度“控制器作为语法”“this”数据

Question

我不明白我错过了什么

我在 html 上没有得到结果，我认为这个问题用 controllerAs 语法管理

注意：我可以在控制台console.log(this.movie); 中看到结果 - 它来自控制器

app.js

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

app.config(function($routeProvider){
    $routeProvider.
    when('/:detail',{
            templateUrl: 'template/detail.html',
            controller : 'detailCtrl' ,
            controllerAs: 'movieAs'
    }).otherwise({
         redirectTo: '/'
    });
});

controller.js

var mfControllers = angular.module('appControllers', []);


mfControllers.controller('detailCtrl', ['$scope', '$routeParams', 'appServices',  function($scope, $routeParams, appServices){
    this.movie = [];
    this.id = $routeParams.detail;
    appServices.homeSearch(this.id).success(function(response){
        this.movie = response;
        console.log(this.movie);  
        // Yes, I do get array result in console
    });

}]);

html - 模板/detail.html

我的尝试

{{movieAs.Title}} 
{{movieAs.movie.Title}} 
{{movie.movieAs.Title}}  
{{movie.Title}} {{title}}

Answer 1

mfControllers.controller('detailCtrl', ['$scope', '$routeParams', 'appServices',  function($scope, $routeParams, appServices){
    var me = this;
    me.movie = [];
    me.id = $routeParams.detail;
    appServices.homeSearch(me.id).success(function(response){
        me.movie = response;
        console.log(me.movie);  
        // Yes, I do get array result in console
    });
}]);

编辑

在 Javascript 中，函数存储为对象，因此从成功内部的 callbeck 方法中，您调用 this，它指的是您正在运行的方法，而不是控制器范围。

最好的做法是将控制器的引用存储在一个可由回调方法访问的变量中。 me 是一个相当随意的名称，但广泛用于引用 parent caller。 https://github.com/johnpapa/angular-styleguide

Answer 2

问题是由于错误的this 引用。

var mfControllers = angular.module('appControllers', []);

mfControllers
  .controller('detailCtrl', ['$scope', '$routeParams', 'appServices', function($scope, $routeParams, appServices) {
    var vm = this;

    vm.movie = [];
    vm.id = $routeParams.detail;
    appServices
      .homeSearch(vm.id)
      .success(function(response) {
        // vm !== this; here
        vm.movie = response;
        console.log(vm.movie);  
    });
  }]);

使用controllerAs 语法的一个好习惯是在控制器的最开始将this 分配给vm。它正确地保存了控制器的引用。

这是必要的，因为 javascript 函数范围。在这里解释它会很长，但它的要点是 function 创建了一个新范围，this 在 function 中会有所不同。托德莫特对此有一个非常great write up。