Angular Directive沒有被調用

該指令因某種原因未被調用。該應用程序是一個rails應用程序。我只在一個頁面上使用角度js。由於應用程序的其餘部分使用rails，所以ng-app用於div而不是body。Angular Directive沒有被調用

控制檯不給我任何錯誤。

//app.coffee 
 

 
angular.module('analytics', ['ngResource','ngRoute', 'highcharts-ng']) 
 
    .config ($routeProvider, $logProvider) -> 
 
    \t $logProvider.debugEnabled(true) 
 

 

 
// Directive 
 
       
 
angular.module('analytics', ['ngResource', 'highcharts-ng']).directive('addButton',() -> 
 
\t return { 
 
\t \t restrict : 'E' 
 
\t \t template : '<p> Hey directive here, </p>' 
 
\t \t replace: true 
 
    } 
 
\t) 
 

 
//main_ctrl.coffee 
 

 
angular.module('analytics',['ngResource', 'highcharts-ng']).controller('MainCtrl',($scope, $http, $httpParamSerializerJQLike) -> 
 
\t #Initial data to display in chart 
 
\t $http.get('http://localhost:3000/analytics/sales.json') 
 
\t \t .success((data) -> 
 
\t \t \t chartData = JSON.parse JSON.stringify(data) 
 
\t \t \t $scope.chartConfig = 
 
\t \t \t \t options: 
 
\t \t \t \t \t chart: 
 
\t \t \t \t \t \t type: 'line' 
 
\t \t \t \t series:[ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t data: chartData.sales 
 
\t \t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t \t xAxis: 
 
\t \t \t \t \t categories: chartData.months 
 
\t \t \t \t \t title: 
 
\t \t \t \t \t \t text: 'Months' 
 
\t \t) 
 
\t \t .error((data) -> 
 
\t \t) 
 
\t \t $scope.branch = []; 
 
\t \t $scope.company = []; 
 
\t \t $scope.item = []; 
 
\t \t $scope.filters = -> 
 

 
\t \t \t params = 
 
\t \t \t \t branch_filter: JSON.stringify $scope.branch 
 
\t \t \t \t company_filter: JSON.stringify $scope.company 
 
\t \t \t \t item: JSON.stringify $scope.item 
 
\t \t \t 
 
\t \t \t $http.get('http://localhost:3000/analytics/sales.json',{params: $httpParamSerializerJQLike(params)}) 
 
\t \t \t \t .success((data) -> 
 
\t \t \t \t \t chartData = JSON.parse JSON.stringify(data) 
 
\t \t \t \t \t console.log chartData.months 
 
\t \t \t \t \t $scope.chartConfig = 
 
\t \t \t \t \t \t options: 
 
\t \t \t \t \t \t \t chart: 
 
\t \t \t \t \t \t \t \t type: 'line' 
 
\t \t \t \t \t \t series:[ 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t data: chartData.sales 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t ] 
 
\t \t \t \t \t \t xAxis: 
 
\t \t \t \t \t \t \t categories: chartData.months 
 
\t \t \t \t \t \t \t title: 
 
\t \t \t \t \t \t \t \t text: 'Months' 
 
\t \t \t \t) 
 
\t \t \t \t .error((data) -> 
 
\t \t \t \t) 
 
\t \t \t 
 
\t \t 
 
\t 
 
\t)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
.container#graph-container[ng-app="analytics" ng-controller="MainCtrl"] 
 
    .row 
 
    highchart#chart1 config="chartConfig" 
 
\t .row 
 
    \t \t .col-md-2.top-padding.bottom-padding 
 
    \t \t select.form-control#sales_branch_filter.chosen-select ng-model="branch" ng-change="filters()" multiple="true" data-placeholder="Branch Filter" 
 
    \t \t \t - Branch.alphabetical.each do |branch| 
 
    \t \t \t \t option value="#{branch.id}" #{branch.name} 
 
    \t \t .col-md-2.top-padding.bottom-padding 
 
    \t \t select.form-control#sales_item_filter.chosen-select ng-model="item" ng-change="filters()" multiple="true" data-placeholder="Item Filter" 
 
    \t \t \t - Item.alphabetical.each do |item| 
 
    \t \t \t \t option value="#{item.id}" #{item.name} 
 
    \t \t .col-md-2.top-padding.bottom-padding 
 
    \t \t select.form-control#sales_company_filter.chosen-select ng-model="company" ng-change="filters()" multiple="true" data-placeholder="Company Filter" 
 
    \t \t \t - Company.alphabetical.each do |company| 
 
    \t \t \t \t option value="#{company.id}" #{company.name}   
 
\t .row 
 
     add-button 
 
     br 
 
     button.btn.btn-primary#add ng-click="add()" Add 
 
     br 
 
    \t \t .col-md-12.sales-container 
 
    \t \t \t = render partial: 'sales_table'

來源

2016-02-10 Michael Victor

我想運行代碼段，但我的代碼運行失敗。你能否將代碼導入到plnkr.co，然後我可以幫你 –

代碼片段將會失敗。因爲它是Rails應用程序的一部分，並且Stackoverflow的代碼片段不支持「slim」和「coffeescript」 –

嘗試重命名add_button.coffee文件。因爲這是在app.coffee文件之前加載的，這就是你的控制器工作的原因。這是如何與軌道。還要從控制器文件和指令文件中刪除依賴項。它覆蓋已經定義的模塊。

來源

2016-02-10 17:13:57

謝謝！這解決了問題！ –

你每次都創建一個新的模塊。

angular.module（moduleName，[]）創建一個新模塊。您應該只調用一次，然後使用angular.module（moduleName）來獲取此模塊。甚至更好，存儲模塊插入變量

var analytics = angular.module('analytics', ['ngResource','ngRoute', 'highcharts-ng']); 
analytics.config(.....) 
analytics.directive(.....) 
// .....

來源

2016-02-10 15:12:40 WirelessKiwi

這兩個angular.module來自兩個不同的文件。我有配置，控制器，服務和指令的單獨文件 –

要注意的是使用angular.module('myModule', [])將創建模塊Mymodule中並覆蓋所有現有的命名MyModule的模塊。使用angular.module('myModule')來檢索現有的模塊。

從docs

你用兩個參數調用它，所以你要覆蓋你想引用它每次模塊的所有時光。

因此，請嘗試在開始時調用angular.module('analytics', ['ngResource','ngRoute', 'highcharts-ng'])一次，然後參考angular.module('analytics')應解決您的問題。

來源

2016-02-10 15:13:36 Ohmen

這兩個angular.module來自兩個不同的文件。我有單獨的配置文件，控制器，服務和指令 –

沒有。AngularJS框架提供了這些功能中的兩個。 [docs]（https://docs.angularjs.org/guide/module）搜索 '創建與檢索 – Ohmen

現在我從除配置文件以外的其他文件中刪除它。該指令仍然無效。控制器雖然工作。 –

Angular Directive沒有被調用

回答

相關問題