Question

我试图理解UI-Router如何与Angular一起工作，我正处于艰难时期。

我有一个索引：

 <body>
  <div ui-view></div>

 <!--Location of file holding app-->
 <script src="App/indexApp.js"></script>
 <!--source of state2 Controller-->
 <script src="App/itemsController.js"></script>
 </body>

app.js：

 var app = angular.module("ITS", ['ui.router'])
 .config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function ($httpProvider, $stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise("/home");
    $stateProvider.state('home', {
        url: "/home",
        templateUrl: "Home.html",
        controller: 'IndexCtrl'
    })
 $stateProvider.state('newItem', {
        url: "/newItem",
        templateUrl: "new.html",
        controller: 'ItemCtrl'

    })

控制器的文件：

 app.controller("ItemCtrl", ['$scope', '$location', '$state',
function ($scope, $location, $state) {
 $scope.testButton = function () { //Test FUNC
    $window.alert("hey");
}
 $scope.title="hello";

最后是视图的html页面：

 <div ng-app="ITS" ng-controller="ItemCtrl">
 <body>
 <button ng-click="testButton()">Test</button>
 <input type="text" ng-model="title"/>
 </body>
 </div>

问题：Home加载正常，我可以使用ui-sref从“Home”导航到“New”，我可以看到测试按钮。我知道控制器正在工作并且正在被访问，但是当我单击按钮时，没有弹出任何内容，并且与“标题”相关联的字段不会被$ scope填充。

我听说过解决方案对于在状态发生变化之前加载数据非常重要，但我似乎无法找到有关这类问题的大量信息。任何帮助都将非常感激。

Answer 1

我想这可能是因为import错误。您在方法中使用$window.alert()，但$window未作为依赖项包含在内。

尝试将$window添加到控件中，如下所示

app.controller("ItemCtrl", ['$scope', '$location', '$state', '$window',
    function ($scope, $location, $state, $window) {
        $scope.testButton = function () { //Test FUNC
            $window.alert("hey");
        };
        $scope.title="hello";
    }]);

这可能有用。还要检查控制台是否有错误。

UI-Router AngularJS控制器无法使用状态

1 个答案: