Question

我有一个非常简单的index.html，里面只有一个视图：

<body ng-app="contentApp" ng-controller="contentCtrl">
    <div ng-view></div>

然后是带路由和控制器的脚本

var contentApp = angular.module('contentApp', ["ngRoute"]);

contentApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/uebersicht",
        {templateUrl: "uebersicht.html",
         controller: "contentCtrl"}
    )


contentApp.controller('contentCtrl', function($scope) {
  $scope.test = "Test";

所以在我的index.html文件中，控制器工作得很好。但在我的ng-view中，我有表达式

{{test}}

没有任何反应，表达式也未被评估。

修改

我犯的错误是我所包含的文件uebersicht.html中的指令错误。所以我写了一些伪代码来阻止整个脚本执行。

Answer 1

确保为 uebersicht

定义了不同的控制器

<强>样本

＆＃13;

var contentApp = angular.module("contentApp", ['ngRoute']);
contentApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when("/uebersicht", {
      templateUrl: "uebersicht.html",
      controller: "content2Ctrl"
    })
}])
contentApp.controller('contentCtrl', function($scope) {
  $scope.test = "Test";
});

＆＃13;

<!DOCTYPE html>
<html ng-app="contentApp">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
  <script src="app.js"></script>
  <!--css-->
  <link rel="stylesheet" href="style.css" />
  <title>Title of the document -1</title>
</head>

<body>
  <div ng-controller="contentCtrl" class="container">
    <h1>   {{test}}</h1>
    <div ng-view=""></div>
  </div>

</body>

</html>

＆＃13;

Answer 2

每个模板应该使用一个控制器。这是一个例子

var contentApp = angular.module("contentApp", ['ngRoute']);
contentApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when("/uebersicht", {
      templateUrl: "uebersicht.html",
      controller: "uebersichtCtrl"
    })
}])

contentApp.controller('contentCtrl', function($scope) {
  $scope.contentModel = "value of content controller";
});

//index.html
<body ng-app="contentApp" ng-controller="contentCtrl">
    {{contentModel}}
    <div ng-view></div>
</body> 

contentApp.controller('uebersichtCtrl', function($scope) {
  $scope.uebersichtModel = "value of uebersicht controller";
});

// template uebersicht.html
<div ng-app="contentApp" ng-controller="uebersichtCtrl">
     {{uebersichtModel}}
</div>

Angular JS表达式未在Route中评估

2 个答案: