angularjs - ng-click 在使用 ui-router 时不能部分工作

Question

我刚开始，AngularJS我有一个路由问题ui-router。基本上我有一个显示登录按钮的部分。问题是单击该按钮不会调用控制器中的相应方法。

模块定义：

var myapp = angular.module('myapp', ['ui.state']);

myapp.config(function($stateProvider, $routeProvider) {

  $stateProvider.state('signin', {
        url : "/", // root route
        views : {
            "signinView" : {
                templateUrl : 'signin.html'
            }
        },
        controller: function($scope) {
            $scope.auth = function() { 
        console.log("clicked");
            };
        }
        //controller: 'LoginController'
    }).state('signedin', {
        views : {
            "signinView" : {
                templateUrl : 'partials/signedin.html'
            }
        }
    });

});

signin.html: _

<button class="btn" ng-click="auth()">Sign In</button>

Plunker多数民众赞成在显示问题。

Answer 1

控制器定义应该在视图定义中。
您的代码应如下所示。

myapp.config(function($stateProvider, $routeProvider) {

  $stateProvider.state('signin', {
        url : "", // root route
        views : {
            "signinView" : {
                templateUrl : 'signin.html',
        controller: function($scope) {
                $scope.auth = function() { 
        alert("Clicked");
        console.log("clicked");
            };
        }
            }
        }
        //controller: 'LoginController'
    }).state('signedin', {
        views : {
            "signinView" : {
                templateUrl : 'partials/signedin.html'
            }
        }
    });

这是Plunker

Answer 2

我没有使用 ui-router 但通过快速查看代码我可以看到您的控制器定义不正确。它需要驻留在定义模板的同一对象文字中：

...
"signinView" : {
  templateUrl : 'signin.html',
  controller: function($scope) {
    $scope.auth = function() { 
      alert("Clicked");
      console.log("clicked");
    };
  }
}
...

ui-router 文档对此很清楚。

工作柱塞