별도의 JS 파일의 각 지침?
-
21-12-2019 - |
문제
나는이 ngfocused 지시문을 가지고 있지만, 그것을 자체 JS 파일에 넣고 싶습니다.내가 어떻게 그것을 쥐고 싶어?
var appObject = angular
.module('app', ['ngAnimate'])
.directive('ngFocused', [
function() {
var FOCUS_CLASS = "focused";
return {
restrict: 'A', //Attribute only
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = true; });
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = false; });
});
}
}
}
]);
. 해결책
나는 IIFE 접근 방식을 좋아합니다.새 파일에서 :
(function(app) {
app.directive(....)
}(angular.module('app'));
.
모든 객체를 전역 네임 스페이스에서 보관합니다.그를 참조하기 전에 각 앱을 정의하는 스크립트를 참조하십시오.
다른 팁
그냥 두 파일로 나눌 수 있습니다.(그리고 <script>
태그를 사용하여 새 파일을 HTML 파일로 참조하는 것을 잊지 마십시오.) :
// file app.js
var appObject = angular.module('app', ['ngAnimate'])
// file ngFocused.js
appObject.directive('ngFocused', [ function() {
var FOCUS_CLASS = "focused";
return {
restrict: 'A', //Attribute only
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = true; });
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = false; });
})
};
}]);
. 제휴하지 않습니다 StackOverflow