我可以将控制器保存在AngularJS的模板文件中吗？

发布时间：2020-12-17 16:56:25 所属栏目：安全来源：网络整理

导读：我有一个索引页面,其中包含以下内容： – ul lia href="#"Home/a/li lia href="#about"About/a/li/uldiv ng-view/div 以下是我的路由脚本： – var app = angular.module('myApp',['ngRoute']);app.config(function($routeProvider) { $routeProvider .when(

我有一个索引页面,其中包含以下内容： –

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
</ul>
<div ng-view></div>

以下是我的路由脚本： –

var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider
    .when('/',{
        templateUrl : 'home.html',controller  : 'homeController'
    }).when('/about',{
        templateUrl : 'about.html',controller  : 'aboutController'
    });
});

我可以将控制器保存在templateUrl文件中吗？如下： –

about.html

<script>
app.controller('aboutController',function($scope) {
    $scope.message = 'This is About Us page.';
});
</script>
<h1>About Us</h1>
<p>{{ message }}</p>

解决方法

是的,您可以将控制器保留在模板中.

的index.html

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-route.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body ng-app="myApp">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div>
        <ul class="nav navbar-nav">
          <li>
            <a href="#home">Home</a>
          </li>
          <li><a href="#about">About</a></li>
          </ul>
      </div>

    </div>
  </nav>
   <div ng-view></div>


  <script>
    var app = angular.module('myApp',['ngRoute']);
    app.config(function($routeProvider) {
      $routeProvider
        .when('/home',{
          templateUrl: 'home.html',controller: 'homeController'
        }).when('/about',{
          templateUrl: 'about.html',controller: 'aboutController'
        });
    });
    app.controller('aboutController',function($scope) {
      console.log("aboutController");
        $scope.message = 'This is about page.';
    });
    app.controller('homeController',function($scope) {
      console.log("homeController");
        $scope.message = 'This is Home page.';
    });
  </script>
</body>

</html>

home.html和about.html我保持不变

<h3> {{message}}</h3>

你可以查看demo here.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!