angular "controller as syntax" "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 - template/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 中，函数存储为对象，因此从 success 中的 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 中将是不同的 . Todd Mott 对此非常 great write up。

angular "controller as syntax" "this" 数据

angular "controller as syntax" "this" data

javascript

angularjs

angularjs-controlleras