Question

我正在使用AngularJS和ui-router。我的代码在同一个元素上有ng-controller和ui-view，控制器没有被触发

http://plnkr.co/edit/UphvqV01R7m0WwlY67YA?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>

    <script src="app.js"></script>
  </head>

  <body>
    <div ui-view="main" ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>  
    </div>

  </body>

</html>

使用Javascript：

var app = angular.module('plunker', []);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider
    .state("home", {
      url: "^",
      resolve: {
        test: function() {
          alert("Triggered resolve home");
          return true;
        }
      }
    })
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

你能帮忙修理或解释原因吗？

Answer 1

您需要让主模块最终以某种方式依赖于'ui.router'。现在你让它依赖于任何东西（[]）。

var app = angular.module('plunker', ['ui.router']);

Answer 2

不要这样做。

当您转换到某个州时，ui.router会为每个有效的uiView元素分配一个控制器，因此您之前指定的任何控制器都将被替换。

将uiView包装在父元素中，然后将控制器应用于该元素。

另外，正如Jared所说的那样，你甚至都没有导入ui.router模块，所以你也需要这样做。

ng-controller和ui-view不适用于同一个元素

2 个答案: