Angularjs指令只能在控制器文件中工作

所以，使用angularJS，爲了更加清晰，我想在自己的文件中分隔我的指令。我嘗試了一些我在這裏和其他地方發現的建議，但沒有奏效。Angularjs指令只能在控制器文件中工作

現在我的指令是在控制器文件中，這也是我定義我的模塊的文件。

Controller.js：

var app = angular.module("viewerApp", ["ngDialog"]); 

app.config(['ngDialogProvider', function (ngDialogProvider) { 
    ngDialogProvider.setDefaults({ 
     className: 'ngdialog-theme-default', 
     plain: false, 
     showClose: true, 
     closeByDocument: true, 
     closeByEscape: true, 
     appendTo: false, 
     preCloseCallback: function() { 
      console.log('default pre-close callback'); 
     } 
    }); 
}]); 

app.controller('viewerController', function ($scope, $rootScope, ngDialog) { 

/* 
Here I have most of my $scope manipulations and functions 
*/ 

}); 

app.controller('InsideCtrl', function ($scope, ngDialog) { 

/* 
Small controller to handle some dialog event 
*/ 

}); 

app.directive('myDirective', function() { 
    return { 
     template: 'Directive, lang: {{ currentLanguage }}' 

    }; 
})

然後在我的HTML文件：

<body ng-keypress="handleKeys($event)" ng-controller="viewerController"> 

{{ "Default : " + defaultLanguage + " - Current : " + currentLanguage }}<br /> 
<my-directive></my-directive>

所以這樣它工作正常，我有我的測試模板顯示的一樣，我想要的。

但是，當我將指令對應的代碼移動到新文件時，它停止工作。

FYI我試圖在新文件中的以下內容：

app.directive('myDirective', function() { 
    return { 
     template: 'Directive, lang: {{ currentLanguage }}' 

    } 
}); 
/* ----------------- */ 
angular.module("viewerApp", ["ngDialog"]).directive('myDirective', function() { 
    return { 
     template: 'Directive, lang: {{ currentLanguage }}' 

    }; 
}) 
/* ----------------- */ 
angular.module("viewerApp").directive('myDirective', function() { 
    return { 
     template: 'Directive, lang: {{ currentLanguage }}' 

    }; 
})

我該如何解決這個問題？

問候。

來源

2015-04-02 Ellone

並且您已經使用包含在你的頁面的''

我不知道你如何定義控制器/指令所關聯的模塊，所以我會重新開始。

我們將從某處定義的模塊開始，讓我們在控制文件中說：

viewerModule = angular.module("viewerApp", ["ngDialog"]) 
viewerModule.controller('viewerController' ...)

而在指令文件你只需要與引用模塊

viewerModule = angular.module("viewerApp") 
viewerModule.directive('myDirective' ...)

請記住，沒有方括號來引用模塊！

我希望它能幫助

來源

2015-04-02 15:54:21 Sikian

創建myDirective.js後，請確保以下幾點：

負載myDirective.js到您放置控制器的html頁面

<script src="path/to/myDirective.js" type="text/javascript"></script>

0123：，但該控制器後

2。創建HTML模板該指令（我-directive.html）

回到你的指令腳本文件，該回報對象中，添加以下內容：

restrict: "E", 
templateUrl: '/app/templates/search.html'

4.現在在base/parent html文件中，將<my-directive></my-directive>加到body元素上

來源

2015-04-02 16:02:15 yazjisuhail

那麼，我只是通過添加一個包含指令的新模塊來實現它的工作。然後我在主模塊依賴關係中添加了這個模塊。

指令文件：

var app = angular.module("myDirective-directive", []); 

app.directive('myDirective', function() { 
    return { 
     template: 'Directive, lang: {{ currentLanguage }}' 
    }; 
});

而且在控制文件中我改變了我的模塊聲明是這樣的：

var app = angular.module('viewerApp', ["ngDialog", "myDirective-directive"]);

這個解決辦法確定抑或是不建議做這種方式？

來源

2015-04-02 16:21:31 Ellone

聲明應用程序變量，如果它不是在你的指令文件全球Check out this link this will help you

來源

2015-04-02 16:49:38

我不建議你使用風格角度模塊。不要使用這樣的

var app = angular.module("example",[...]);

這是很好的風格來使用角度模塊喜歡這種方式。

angular.module("example", [...]) ... 
... 
...

內的另一個文件

angular.module("example").directive(...) // or something else

來源

2015-04-03 14:50:46

相關問題