너무 많은 AngularJS와 지침을 방지

Question

I 다음 지시문이 : 나는 내 템플릿 (someTemplate.html)에서

.directive('myDirective', function() { 
    restrict: 'A', 
    templateUrl: 'app/templates/someTemplate/html',  
}); 

다음과 같습니다

<div> 
    <div>Some div</div> 
    <input type="button" value="button" /> 
</div> 

내가에 동작을 추가 할을 버튼과 div. 나는 'myDirective에 동작을 추가해야 하는가

<div> 
    <div div-click>Some div</div> 
    <input type="button" value="button" button-click /> 
</div> 

더 지시어를 추가하고 element.bind (를 통해 클릭 이벤트를 바인딩 ...하지만 가장 좋은 방법이있다 : 나는과 같이 추가 지침의 길을 갈 수 있습니다 '그 요소를 포함하는? jQuery 또는 jQlite를 통해. 템플릿 안의 클릭 가능한 요소는 다시 채울 수 없습니다 .. 그래서 jQuery를 사용하여 해당 요소를 찾고 이벤트 리스너를 바인딩해야합니까? 항상 지시문 경로를 사용하여 폭발, 최선의 방법은 무엇입니까?

Answer 1

나를위한 질문은 지시가 정확히 무엇인지에 관한 것입니다.

jQuery와 같은 다른 프레임 워크에서 알 수있는 기능을 지시문으로 래핑하는 것처럼 소리가납니다. 이것은 다음과 같은 것들로 연결됩니다 :

var app = angular.module("module.directives", []); 
app.directive('myDirective', function() { 
    restrict: 'A', 
    templateUrl: 'app/templates/someTemplate/html', 
    link: function(scope, el) { 
    el.on("click", function() { console.log(42); }); 
    } 
}); 

분명히 가능 합니다만 이것은 (적어도 나를 위해) "나쁜"스타일로 간주됩니다. Angular와 다른 점은 DOM을 프레임 워크의 "모델"부분으로 사용하지 않는다는 것입니다 (예 : jQuery 또는 Prototype do). 이 라이브러리에서 오는이 주위에 당신의 머리를 정리하는 일이지만, 실제로는, 우선,이 귀결 :

scope와 협력 및 범위에 대한 변경을 할 수는 DOM에 반영.

반사 부분은 실제로 짧고 쉬운 모양입니다. Angular는 이것을 상자 밖으로 나눕니다 (즉, "대부분의 시간").

클릭하여 예제 재검토 - 각도는 지시문 형식의 우수한 이벤트 처리기를 제공합니다.

<a href="#" onclick="method()">here</a> 

: - 그것은 다음과 같이 당신이 요소에 직접 자바 스크립트를 결합하는 것 옛날처럼 조금 보이는

<div> 
    <div ng-click="method()">Some div</div> 
    <input type="button" value="button" ng-click="method2()" /> 
</div> 

이 지시어는 식을 취 ng-click이를위한 아주 좋은 예입니다 각도가 다르면 - Angular는 현재 scope에있는 method 및 method2 이름을 찾습니다. 현재 어떤 범위에 있는지는 상황에 따라 다릅니다 (이 시점에서 나는 docs을 많이 제안합니다).

var app = angular.module("module.directives", []); 
app.directive('myDirective', function() { 
    restrict: 'A', 
    templateUrl: 'app/templates/someTemplate/html', 
    controller: ['$scope', function(scope) { 
    scope.active = false; 
    scope.method = function() { console.log(42); }; 
    scope.method2 = function() { scope.active = !scope.active }; 
    }] 
}); 

이도 늦게 같은 지침의 링크 단계에서, 여러 곳에서 정의 할 수 있습니다 : 우리의 의도와 목적 모두를 위해

, 당신은 이전에서 지시어 내부의 컨트롤러를 구성, 말할 수 있습니다. 별도의 모듈에 추가 컨트롤러를 생성 할 수도 있습니다.그러나 잠시 동안 이것을 고수하십시오 :

템플릿에서 - div를 클릭하면 범위의 method이 호출됩니다. 공상적이고 콘솔 출력. method2은 조금 더 흥미 롭습니다 - 범위의 active 변수를 변경합니다. 그리고 당신은 당신의 이점에 이것을 사용할 수 있습니다 :

<div> 
    <div ng-click="method()">Some div</div> 
    <input type="button" value="button" ng-click="method2()" /> 
    <span ng-show="active">Active</span> 
</div> 

당신이 버튼을 클릭

는 범위가 켜져 그리고됩니다 - ng-show 지시어는 당신을 위해 이것을 처리합니다.

이것은 예상보다 약간 오래 걸렸습니다.하지만 이것이 "모범 사례"(실제로 수행하고자하는 것에 의지하고 있음)에 대해 약간의 비결을 줄 수 있기를 바랍니다.