Question

使用ng-submit，我试图在我的MainController中调用一个函数。但是，未调用函数搜索。我假设我需要对我的功能进行角度化但不确定如何。

index.html

<html ng-app="main">
    <head>
        <script src="angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-controller="MainController as mainCtrl">
        <p>{{mainCtrl.message}}</p>

        <div>
            {{mainCtrl.error}}
        </div>

        <form ng-submit="search()">
            <input type="search" required placeholder="Username to find" ng-model="mainCtrl.username"/>
            <input type="Submit" value="Search"/>
        </form>

        <div>Name: {{mainCtrl.user.name}}</div>
        <div>Location: {{mainCtrl.user.location}}</div>
        <div>
            <img ng-src="{{mainCtrl.user.avatar_url}}" title="{{mainCtrl.user.name}}"/>
        </div>
    </body>
</html>

的script.js

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$scope", "$http",MainController]);

    function MainController($scope, $http) {

        function onUserComplete($response) {
            $scope.user = $response.data;
        };

        function onError(reason) {
            $scope.error = "Could not fetch the user";
        };

        function search() {
            $http.get("https://api.github.com/users/" + this.username)
                .then(onUserComplete, onError);
                console.log("1");
        };

        $scope = this;
        this.message = "GitHub viewer!";
        this.username = "angular";
    };
}());

Answer 1

看起来您在范围内没有搜索功能。

如果您使用控制器作为语法，那么您可以采用一种方法来简化操作。实际上，你根本不需要$ scope。

在控制器中将控制器命名为vm，您的视图将在各个问题上保持相似。

vm代表视图模型。 Check out this style guide by John Papa，它真正简化了我的角度代码并帮助它更有意义。

忽略样式指南，一个简单的答案就是将vm.search()而非search()添加到ng-submit

index.html

<html ng-app="main">
    <head>`enter code here`
        <script src="angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-controller="MainController as vm">
        <p>{{vm.message}}</p>

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

        <form ng-submit="vm.search()">
            <input type="search" required placeholder="Username to find" ng-model="vm.username"/>
            <input type="Submit" value="Search"/>
        </form>

        <div>Name: {{vm.user.name}}</div>
        <div>Location: {{vm.user.location}}</div>
        <div>
            <img ng-src="{{vm.user.avatar_url}}" title="{{vm.user.name}}"/>
        </div>
    </body>
</html>

script.js

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http", MainController]);

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

        vm.onUserComplete = onUserComplete;
        vm.onError = onError;
        vm.search = search;
        vm.message = "GitHub viewer!";
        vm.username = "angular";

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

        function onError(reason) {
            vm.error = "Could not fetch the user";
        };

        function search() {
            $http.get("https://api.github.com/users/" + vm.username)
                .then(onUserComplete, onError);
                console.log("1");
        };
    };
}());

该样式指南中有很多内容可以简化您编写角度代码的方式，这是一个很好的起点。

使用带有'ControllerAs'语法的ng-submit调用函数

1 个答案: