Angular Directive未被调用

Question

由于某种原因，不会调用该指令。该应用程序是一个rails应用程序。我只在一页上使用角度js。由于应用程序的其余部分使用rails，因此ng-app用于div而不是body。

控制台没有给我任何错误。

//app.coffee

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


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

//main_ctrl.coffee

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

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

<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"
	.row
  		.col-md-2.top-padding.bottom-padding
    		select.form-control#sales_branch_filter.chosen-select ng-model="branch" ng-change="filters()" multiple="true" data-placeholder="Branch Filter"
    			- Branch.alphabetical.each do |branch|
    				option value="#{branch.id}" #{branch.name}
  		.col-md-2.top-padding.bottom-padding
    		select.form-control#sales_item_filter.chosen-select ng-model="item" ng-change="filters()" multiple="true" data-placeholder="Item Filter"
    			- Item.alphabetical.each do |item|
    				option value="#{item.id}" #{item.name}
  		.col-md-2.top-padding.bottom-padding
    		select.form-control#sales_company_filter.chosen-select ng-model="company" ng-change="filters()" multiple="true" data-placeholder="Company Filter"
    			- Company.alphabetical.each do |company|
    				option value="#{company.id}" #{company.name}         
	.row
      add-button
      br
      button.btn.btn-primary#add ng-click="add()" Add
      br
  		.col-md-12.sales-container
  			= render partial: 'sales_table'

Answer 1

尝试重命名add_button.coffee文件。因为它在app.coffee文件之前加载，这就是你的控制器工作的原因。这就是轨道的方式。还要从控制器文件和指令文件中删除依赖项。它覆盖了已经定义的模块。

Answer 2

您每次都在创建一个新模块。

angular.module（moduleName，[]）创建一个新模块。您应该只调用一次，然后使用angular.module（moduleName）来获取此模块。或者甚至更好，将模块存储到变量

中

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

Answer 3

  

注意使用angular.module('myModule', [])将创建模块myModule并覆盖任何名为myModule的现有模块。使用angular.module('myModule')检索现有模块。

来自docs

您始终使用两个参数调用它，因此每次要引用模块时都会覆盖模块。

因此，请尝试在开始时调用angular.module('analytics', ['ngResource','ngRoute', 'highcharts-ng'])一次，并在angular.module('analytics')解决您的问题时进一步引用它。