“为”Angular ng-controller无法按预期工作

时间:2017-01-14 18:35:14

标签: angularjs

doc让我想到下面,由于ng-click="ctrl.nextDay()",我应该使用"GameController as ctrl"。但是,在这种情况下,没有任何反应,也没有报告错误。只是ng-click="nextDay()"可以工作。

<div ng-controller="GameController as ctrl" >
<div class="panel panel-default">
    <button type="button" class="btn btn-info"  ng-click="nextDay()" >
      <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day
    </button>
</div>

控制器定义如下:

angular.module('FEModule')
.controller('GameController', ['$scope', '$http', '$fancyModal',
    function($scope, $http, $fancyModal) {

        console.log("GameController is instantiated! Yeah.");

        $scope.nextDay = function() {
                console.log("this is next day function!");                      
        }

这是什么原因?

2 个答案:

答案 0 :(得分:4)

nextDay()是$ scope的函数。所以它没有附加到控制器,并且使用ctrl.nextDay()在视图中访问,就像在作用域上的任何其他函数一样。

如果要将其作为附加到控制器的函数,并在视图中使用 this.nextDay = function() { console.log("this is next day function!"); } ,则控制器中的代码必须为

DispatchQueue.main.async

答案 1 :(得分:0)

将nextDay()绑定到控制器实例或删除controller as语法并使用$ scope。

解决方案A

    <div ng-controller="GameController as ctrl" >
<div class="panel panel-default">
    <button type="button" class="btn btn-info"  ng-click="ctrl.nextDay()" >
      <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day
    </button>
</div>

解决方案B

<div ng-controller="GameController" >
<div class="panel panel-default">
    <button type="button" class="btn btn-info"  ng-click="nextDay()" >
      <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day
    </button>
</div>