Javascript AngularJS ng click无法使用$routeProvider中的Controllera

我正在用Angular自学，我正在为此编写一个小应用程序。我遵循John Papa的角度风格指南，并使用控制器，而不是$scope（Y030）

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

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

有什么提示吗？

完整的应用程序可在此处找到：

---

以下是路由代码：

(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>

---

替换

$scope.configure=configure，用于
controller.configure=configure
替换
$scope.configure=configure，用于
controller.configure=configure
使用
controllera
时，您需要将模型数据和方法绑定到您使用变量
controller

更改：

 $scope.configure = configure;

到

当使用
controllera
时，您只需要或使用
$scope
进行角度事件或手表等操作
您需要将您的模型数据和方法绑定到您使用变量
controller
引用的控制器中的
此

更改：

 $scope.configure = configure;

到

您将只需要或使用
$scope
来处理angular事件或手表之类的事情
过了一段时间，我放弃了，并遵循angular上其他人正在做的事情：

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

重新启动几次后，重新加载页面，它就工作了

<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>


演示
这是今天的消息
来自服务器的结果
{{ctrl.message}
配置
过了一段时间，我放弃了，按照Angular上其他人都在做的事情：

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

重新启动几次后，重新加载页面，它就工作了

<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>


演示
这是今天的消息
来自服务器的结果
{{ctrl.message}
配置
没有区别当你刚才说它在工作时没有意义当你怀疑缓存与它有任何关系时你打破了其他东西没有区别当你刚才说它在工作时没有意义当你说它与它有任何关系时你打破了其他东西没有区别差别事实上，表达式{{}工作正常，但引号（标记）之间没有任何效果。请在GreetingCtrl:
function configure（）{console.log（“Inside configure”）；$location.url（'config'）；}
中尝试<代码>控制器.configure=配置。在视图中显示：
ng单击=“greet.configure（）”
。注意你的控制台。如果显示“inside…”，则问题在于服务。你说你试过了，但是你能再试一次吗？另外，从$injects和参数中删除$scope。您正在使用
var controller=this
。不建议使用$scope.make no difference它没有任何区别。事实上，表达式{{}工作正常，但引号（标记）之间没有任何效果。请在GreetingCtrl:
function configure（）{console.log（“Inside configure”）；$location.url（'config'）；}
中尝试<代码>控制器.configure=配置。在视图中显示：
ng单击=“greet.configure（）”
。注意你的控制台。如果显示“inside…”，则问题在于服务。你说你试过了，但是你能再试一次吗？另外，从$injects和参数中删除$scope。您正在使用
var controller=this
。不建议使用$scope。有时我在Chrome中遇到缓存问题。我更喜欢使用Firefox。有时我在Chrome中的缓存上遇到问题。我更喜欢使用Firefox。