Question

在HTML中我有这个：

<div class="container" ng-controller="MainController as vm">

    <h1>{{vm.message}}</h1> 

    {{vm.username}}

    <form name="searchUser">
        <input type="search" placeholder="Find username" ng-model="vm.username">
        <input type="submit" value="Search" ng-click="vm.search()">
        //or should it be without vm.?
        //<input type="submit" value="Search" ng-click="search()">
    </form>

    <h4>{{vm.error}}</h4>

    <h3>{{vm.user.name}}</h3>
    <img ng-src="{{vm.user.avatar_url}}" title="{{vm.user.name}}">

</div>

以下是一些变体 - 推荐哪一个？

选项1：

(function() {

    function MainController($http) {
        var vm = this;
        vm.message = 'GitHub Viewer';
        vm.username = 'angular';

        vm.successCallback = function (response){
            vm.user = response.data;
        }

        vm.errorCallback = function (response){
            vm.error = 'Could not fetch the user data';
        }

        vm.search = function(){
            $http.get('https://api.github.com/users/' + vm.username)
                .then(vm.successCallback, vm.errorCallback);            
        }

        vm.search();

    }

    angular.module('app').controller('MainController', MainController);

})();

选项2：

(function() {

    function MainController($http) {
        var vm = this;
        vm.message = 'GitHub Viewer';
        vm.username = 'angular';

        var successCallback = function (response){
            vm.user = response.data;
        }

        var errorCallback = function (response){
            vm.error = 'Could not fetch the user data';
        }

        var search = function(){
            $http.get('https://api.github.com/users/' + vm.username)
                .then(successCallback, errorCallback);            
        }

        search();

    }

    angular.module('app').controller('MainController', MainController);

})();

选项3：

(function() {

    function MainController($http) {
        var vm = this;
        vm.message = 'GitHub Viewer';
        vm.username = 'angular';

        function successCallback (response){
            vm.user = response.data;
        }

        function errorCallback (response){
            vm.error = 'Could not fetch the user data';
        }

        function search(){
            $http.get('https://api.github.com/users/' + vm.username)
                .then(successCallback, errorCallback);            
        }

        search();

    }

    angular.module('app').controller('MainController', MainController);

})();

Answer 1

使用＆＃39;控制器作为＆＃39;语法不能简单地调用控制器中的任何函数。未分配给vm的功能在视图中不可见，因此无法调用。

成功和错误回调函数不必分配给vm，因为它们仅由promise内部调用。

我个人不喜欢将内部函数分配给局部变量。这样做使得在定义之前无法引用它们。

这是我如何编写控制器：

(function() {

    MainController.$inject = ['$http'];

    function MainController($http) {
        var vm = this;

        vm.message = 'GitHub Viewer';
        vm.username = 'angular';
        vm.search = search;
        vm.user = null;
        vm.error = null;

        search();

        function search () {
            $http.get('https://api.github.com/users/' + vm.username)
                .then(successCallback, errorCallback);            
        }

        function successCallback (response) {
            vm.user = response.data;
        }

        function errorCallback (response) {
            vm.error = 'Could not fetch the user data';
        }
    }

    angular.module('app').controller('MainController', MainController);
})();

Answer 2

vm.search(...)是对的; 然后ng-change比ng-click

更合适

<div class="container" ng-controller="MainController as vm">

<h1>{{vm.message}}</h1> 

{{vm.username}}

<form name="searchUser">
    <input type="search" placeholder="Find username" ng-model="vm.username">
    <input type="submit" value="Search" ng-change="vm.search()">
</form>

<h4>{{vm.error}}</h4>

<h3>{{vm.user.name}}</h3>
<img ng-src="{{vm.user.avatar_url}}" title="{{vm.user.name}}">

在Controller中将函数定义为vm的正确方法

2 个答案: