ng視圖無法使用自定義指令

我最近開始學習angularJS，並遇到ng-view指令的問題。如果這個問題太天真了，道歉。ng視圖無法使用自定義指令

這是我的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-觀點並不能代替搜索框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顯示正常。
當我複製粘貼searchbox.html文件到index.html文件時，鏈接函數被正確調用。

這是一個已知的問題嗎？自定義指令是否與ng-view混淆並使其失效。我向你保證我在發佈我的問題之前做了大量的搜索，但找不到合適的答案。

來源

2013-07-20 Mishra

是文件名directive.js或指令。 JS？您的index.html和問題描述不一致。 –

這是directives.js，你還發現不一致/不清楚/混淆？ – Mishra

移動這條線從directives.js

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

到app.js

這樣，你總是以相同的角度模塊實例的工作，而不是創建它的新實例的頂部。然後

所有的控制器，指令和CONFIGS將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'}); 
}]);

來源

2013-07-20 07:35:52

ng視圖無法使用自定義指令

回答

相關問題