javascript - Angular Directive(指令)未被调用

Question

由于某种原因该指令没有被调用。该应用程序是一个 Rails 应用程序。我只在一页上使用 Angular js。 ng-app 用于 div 而不是 body，因为应用程序的其余部分使用 Rails。

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

//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 文件之前加载的，这就是您的 Controller 工作的原因。铁轨就是这样。还要从 Controller 文件和指令文件中删除依赖项。它会覆盖已经定义的模块。