Javascript 棱角;“作为语法的控制器”&引用;这";数据

Javascript 棱角;“作为语法的控制器”&引用;这";数据,javascript,angularjs,angularjs-controlleras,Javascript,Angularjs,Angularjs Controlleras,我不明白我错过了什么 我在html上没有得到结果,我认为用controllerAs语法管理这个问题 注意:我可以在consoleconsole.log(this.movie)中看到结果-来自控制器的its app.js var app = angular.module('mfApp',['ngRoute', 'appControllers']); app.config(function($routeProvider){ $routeProvider. when('/:detai

我不明白我错过了什么

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

注意:我可以在console
console.log(this.movie)中看到结果-来自控制器的its

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: '/'
    });
});
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
    });

}]);
controller.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: '/'
    });
});
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}}
编辑

在Javascript中,函数存储为对象,因此从succeess中的callbeck方法调用
this
,它引用正在运行的方法,而不是控制器范围


最好的做法是将对控制器的引用存储在一个可由回调方法访问的变量中
me
是一个相当随意的名称,但广泛用于指代
父调用方

问题是由于错误的
参考

var mfControllers=angular.module('appControllers',[]);
多功能控制器
.controller('detailCtrl'、['$scope'、'$routeParams'、'appServices',函数($scope、$routeParams、appServices){
var vm=这个;
vm.movie=[];
vm.id=$routeParams.detail;
应用服务
.homeSearch(虚拟机id)
.成功(功能(响应){
//vm!==这个;这里
vm.movie=响应;
console.log(vm.movie);
});
}]);
使用
controllerAs
语法时的一个好做法是在控制器的最开始处将
分配给
vm
。它正确地保存控制器的参考


这是必要的,因为javascript函数的作用域。在这里解释它需要很长时间,但要点是
函数
创建了一个新的作用域,
函数
内部的
将有所不同。托德·莫特对此有着非常深刻的理解。

var vm=this;vm.movie=[]此内部主搜索与控制器竞赛
movieAs不同。如果您要更改此内容,则movie
将起作用。movie改为在此处重新分配此内容。movie=response;明白了,我可以问一下为什么“this”移到variable-variable是一个公正的名称吗?理解的可能重复的可能重复的可能重复的可能重复的名称吗?我可以问一下为什么“this”移到variable-variable是一个公正的名称吗name@ShibinRagh,
取决于函数的调用方式,请再看一个问题-我们在“控制器脚本”顶部更改每个控制器的“var vm=this”是否是一种好方法?是的,这是一种良好的做法。只使用vm而不是这个。一个好的建议是使用vm语法,正如指南中所说的,请再问一个问题-我们在“控制器脚本”的顶部更改每个控制器的“var vm=this”是否合适@ShibinRagh yes。它有两个用途:1)它解决了
这个
问题,2)很明显
vm
指的是控制器。顺便说一下,
vm
的意思是“视图模型”,这就是控制器真正的含义