2

我不明白我错过了什么

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

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

应用程序.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: '/'
    });
});

控制器.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}}
4

2 回答 2

4 
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

于 2015-12-15T13:03:08.233 回答
1

问题是由于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语法时的一个好习惯是在控制器的最开始分配thisto vm。它正确地保存了控制器的参考。

这是必要的，因为 javascript 函数作用域。在这里解释它会很长，但它的要点是function创建一个新的范围，this在 a 内部function会有所不同。托德·莫特对此有一篇非常棒的文章。

于 2015-12-15T13:09:42.750 回答