Question

此代码实际上是从egghead.io逐字逐句的，但除非我删除="app"并从ng-controller元素中删除<body>属性，否则它根本不起作用。（当然，最后一个<script>元素在进程中被忽略 - 通常在app.js中的代码。）当然，删除这些位会阻止其他任何工作或被添加。

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
    <script src="http://code.angularjs.org/angular-ui-router-1.0.0.min.js"></script>
    <script>
      angular.module('app', ['ui.router'])
      .controller("FirstCtrl", function FirstCtrl() {
        var first = this;
        first.greeting = "First";
      });
    </script>
  </head>
  <body ng-controller="FirstCtrl as first">
    <div>
      <input type="text" ng-model="first.greeting" placeholder="First Name">
      <hr>
      <h1>{{ first.greeting }} World!</h1>
    </div>
  </body>
</html>

此处similar code on JSFiddle。（它只是相似，因为JSFiddle施加的约束使得无法发布相同的代码。它有同样的问题，所以我认为差异对于追踪错误的来源是微不足道的。）

错误在哪里？为什么这不起作用？

Answer 1

最新的角度依赖对我有用。

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script>
      angular.module('app', ['ui.router'])
      .controller("FirstCtrl", function FirstCtrl() {
        var first = this;
        first.greeting = "First";
      });
    </script>
  </head>
  <body ng-controller="FirstCtrl as first">
    <div>
      <input type="text" ng-model="first.greeting" placeholder="First Name">
      <hr>
      <h1>{{ first.greeting }} World!</h1>
    </div>
  </body>
</html>

Answer 2

您正在使用角度ui-router但未按照预期的方式使用它。检查此处documentation以获得更清晰的想法。 Angular UI路由器将其内容加载到包含ui-view属性的容器中。根据文件

AngularUI路由器是AngularJS的路由框架，它允许您将接口的各个部分组织到状态机中。与围绕URL路由组织的Angular核心中的$ route服务不同，UI-Router是围绕状态组织的，可以选择附加路由以及其他行为。

您需要在ui-view中加载不同的状态，并在过程中传递不同状态的值。您需要在应用配置中为$stateProvider和$urlRouterProvider添加依赖关系，以实现功能完备的角度ui路由器实现。这被告知你需要做的事情如下 -

并查看PLUNKER
中的工作示例

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

<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
<div class="row">
<div class="span12">
  <div class="well" ui-view></div>        
</div>
</div>         

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")

  $stateProvider
    .state('route1', {
        url: "/route1",
        templateUrl: "route1.html",
        controller: function($scope) {
            $scope.greeting = "First";
          }
    })
 })
</script>

</body>

</html>

为什么这段代码会破坏一次＆＃34; app＆＃34;并添加了ng-controller？

2 个答案: