Question

我正在和Angular一起教自己，我正在为此写一个小应用程序。我正在关注John Papa的角度风格指南，并使用控制器，而不是 $ scope （Y030）。

问题是当我在ng-view模板中使用类似ng-click =“vm.doSomething（）”的内容时，事件不会被触发。没有来自控制台的消息。如果我使用 $ scope ，则应用程序可以正常运行。

要使其正常工作，只需将“greet.configure（）”替换为“configure（）”。

任何提示？

完整的申请表可以在这里找到：

https://github.com/ajkret/spring-boot-sample/tree/controllerAs-ngView-ngClick-problem

以下是路由代码：

(function() {
    'use strict';

    angular.module('app').config([ '$routeProvider', routing ]);

    function routing($routeProvider) {
        $routeProvider.when('/greet', {
            templateUrl : 'app/components/greet/greet.html',
            controller : 'GreetingCtrl',
            controllerAs : 'greet'
        }).when('/config', {
            templateUrl : 'app/components/config/config.html',
            controller : 'ConfigCtrl',
            controllerAs : 'config'
        }).otherwise({
            redirectTo : '/greet'
        });
    }

})();

以下是模板：

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="panel panel-default">
            <div class="panel-heading">Presentation</div>
            <div class="panel-body">Here is the message of the day</div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="panel panel-default">
            <div class="panel-heading">Result from Server</div>
            <div class="panel-body">
                <h3>{{greet.message}}</h3>
                <button type="button" class="btn btn-primary" ng-click="greet.configure()">Configure</button>
            </div>
        </div>
    </div>
</div>

这是控制器：

(function() {
    'use strict';

    angular.module('app').controller('GreetingCtrl', GreetController);

    GreetController.$inject = ['GreetingService','$location','$scope'];

    function GreetController($service, $location, $scope) {
        var controller = this;
        var message;

        function get() {
            $service.get(function(greet) {
                controller.message = greet.message; 
            });
        }

        function configure() {
            $location.url('config');
        }

        $scope.configure = configure;

        // Bootstrap
        get();
    }
})();

Answer 1

替换$scope.configure = configure;，controller.configure = configure;

Answer 2

使用controllerAs时，您需要将模型数据和方法绑定到已使用变量this

引用的控制器中的controller

变化：

 $scope.configure = configure;

要

controller.configure = configure;

您只需要或使用$scope来处理角度事件或手表等事件

Answer 3

过了一段时间，我放弃了，跟着Angular上其他人正在做的事情：

我放弃了$ routeProvider映射并添加了一个div，指向控制器。这似乎使一切顺利。这可能是Angular的错误吗？我不知道。

重启几次后，重新加载页面，就可以了。

<div ng-controller="GreetingCtrl as ctrl">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div class="panel panel-default">
                <div class="panel-heading">Presentation</div>
                <div class="panel-body">Here is the message of the day</div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div class="panel panel-default">
                <div class="panel-heading">Result from Server</div>
                <div class="panel-body">
                    <h3>{{ctrl.message}}</h3>
                    <button type="button" class="btn btn-primary" ng-click="ctrl.configure()">Configure</button>
                </div>
            </div>
        </div>
    </div>
</div>

AngularJS ng-click不能与$ routeProvider中的controllerAs一起使用

3 个答案: