Question

我最近开始学习angularJS并遇到了ng-view指令的问题。如果这个问题太天真，请道歉。

这是我的index.html文件。如您所见，我使用ng-view指令从index.html文件中抽取出一些html代码。

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
  <meta charset="utf-8">
  <title>My first app!</title>

  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/directives.js"> </script>
  <script src="js/controllers.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

这是我的app.js文件。我对所有网址使用相同的部分模板。

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/searchbox.html',   controller: PhoneListCtrl}).
      otherwise({templateUrl: 'partials/searchbox.html',   controller: PhoneListCtrl});
}]);

这是我的searchbox.html

<div id="container">
  <input type="text" name="s" id="s" float-up="{perspective: '100px', x: '150%'}"/>
</div>

最后这是我的directives.js文件：

'use strict';

var myAppModule = angular.module('phonecat', []);

myAppModule.directive('floatUp', function() {
     return {
        // Restrict it to be an attribute in this case
          restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
          link: function($scope, element, attrs) {
             console.log("test successful");
          }
     };
 });

当我在浏览器中运行它时，永远不会调用我的floatUp指令的链接函数。当我看到我的index.html页面的渲染html时，我得到了这个（注意ng-view没有替代searchbox html）：

<!DOCTYPE html>
<html class="ng-scope" lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>My first app!</title>
<script src="lib/angular/angular.js">
<style type="text/css">
<script src="js/app.js">
<script src="js/directives.js">
</head>
<body>
<div ng-view=""></div>
</body>
</html>

其他观察：

当我从index.html文件中删除directives.js时，ng-view工作正常，搜索框显示正常。
当我将searchbox.html内容粘贴到index.html文件时，会正确调用链接函数。

这是一个已知问题吗？自定义指令会弄乱ng-view并使其无效。我向你保证，我在发布问题之前做了大量的谷歌搜索，但找不到合适的答案。

Answer 1

从directives.js

移动此行

var myAppModule = angular.module('phonecat', []);

到app.js的顶部

这样你总是使用相同的角度模块实例，而不是创建它的新实例。

所有控制器，指令和配置都将是myApModule.controller（或.config或.directive）

同样在app.js中，路由中对控制器的引用应该是字符串controller: 'PhoneListCtrl'，因为尚未定义PhoneListCtrl。

您的controllers.js未提供，但可能看起来像这样：

myAppModule.controller('PhoneListCtrl', ['$scope', function($scope) {
    //Controller code here
}]);

apps.js现在看起来像这样：

myAppModule.
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/searchbox.html',   controller: 'PhoneListCtrl'}).
      otherwise({templateUrl: 'partials/searchbox.html',   controller: 'PhoneListCtrl'});
}]);

ng视图不使用自定义指令

1 个答案: