Правильный способ определить функцию в контроллере как vm

Question

Правильный способ определить функцию в контроллере как vm

0

В 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);

})();

monstro 23 апр. 2016, в 16:45

Источник

0

Я предлагаю вам 2 и 3 варианта (они практически одинаковы).
01axel01christian 23 апр. 2016, в 14:10
0

попробуйте добавить return vm в конце ваших функций. Раньше было необходимо
Simon H 23 апр. 2016, в 14:15

Теги:

angularjs

2 ответа

0

С 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}}">

Salathiel Genèse 23 апр. 2016, в 11:34

Ещё вопросы

Я предлагаю вам 2 и 3 варианта (они практически одинаковы).
попробуйте добавить return vm в конце ваших функций. Раньше было необходимо

Eugene · Accepted Answer · 2016-04-24T01-51-00.000Z

При использовании синтаксиса "контроллер как" вы не можете просто вызвать любую функцию, которая находится в контроллере. Функции, не назначенные vm, не будут видны из представления и поэтому не могут быть вызваны.

Функции успеха и функции обратного вызова ошибок не должны быть привязаны к vm, поскольку они только называются внутренне обещанием.

Мне лично не нравится назначать внутреннюю функцию локальным переменным. Это не позволяет ссылаться на них до их определения.

Вот как я бы написал контроллер:

(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);
})();