angular "controller as syntax" "this" data

14 浏览
0 Comments

angular "controller as syntax" "this" data

我不明白我错过了什么\n我在HTML上没有得到结果，我认为这个问题与controllerAs语法有关\n注意：我可以在控制台中看到结果console.log(this.movie); - 这是从控制器中的代码\napp.js\n

var app = angular.module('mfApp',['ngRoute', 'appControllers']);
app.config(function($routeProvider){
    $routeProvider.
    when('/:detail',{
            templateUrl: 'template/detail.html',
            controller : 'detailCtrl' ,
            controllerAs: 'movieAs'
    }).otherwise({
         redirectTo: '/'
    });
});

\ncontroller.js\n

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);  
        // 是的，我在控制台中得到了数组结果
    });
}]);

\nhtml - template/detail.html\n我的尝试\n

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

0

2 答案

0 Comments

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

在使用controllerAs语法时，一个很好的做法是在控制器的最开始将this赋值给vm。这样可以正确地保持控制器的引用。

这是必要的，因为JavaScript的函数作用域。在这里详细解释会很长，但是要点是function会创建一个新的作用域，函数内部的this会不同。Todd Mott在他的文章中对此进行了很好的阐述。

还有一个问题，请问我们每个控制器都在控制器脚本的开头更改'var vm = this'是一个好方法吗？

是的。它有两个目的：1）它解决了this的问题，2）很明确vm是指控制器。顺便说一下，vm代表"View Model"，这才是控制器真正的含义。

0
0 Comments

AngularJS中的"controller as syntax"是一种用于控制器的语法，它将控制器中的数据和方法绑定到一个对象上，而不是直接绑定到$scope上。在上面的代码中，我们可以看到控制器使用了"controller as"语法，将其绑定到了变量me上。

在代码中的success回调函数中，我们可以看到使用了this关键字来引用控制器的作用域。然而，由于JavaScript中函数是作为对象存储的，所以在这个回调函数中，this关键字实际上指向的是这个方法本身，而不是控制器的作用域。

为了解决这个问题，最好的做法是将控制器的引用存储在一个变量中，并在回调函数中使用这个变量来访问控制器的作用域。在上面的代码中，我们可以看到控制器的引用被存储在了变量me中，并且在回调函数中使用了me来访问控制器的作用域。

通过将控制器的引用存储在一个变量中，我们可以确保在回调函数中访问到正确的作用域，而不会受到this关键字的影响。

在AngularJS的最佳实践中，推荐使用"controller as"语法，并将控制器的引用存储在一个变量中，以避免this关键字的混淆。这样做可以使代码更清晰、更易读，并且符合代码风格指南的推荐。

所以，将控制器的引用存储在一个变量中，并在回调函数中使用这个变量来访问控制器的作用域，是解决上述问题的最佳做法。

0