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函数中存储为对象，因此从您的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＆＃34;控制器作为语法＆＃34; ＆＃34;这＆＃34;数据

2 个答案: