AngularJS가 지시문을 작성한 다음 다른 지시문을 사용합니다.

Question

작성해야하는 상용구 코드를 줄이기위한 지시문을 작성하려고합니다.

인라인 편집을 위해 각도 xeditable 지정 문을 사용하고 있지만 지시문에서 xeditable 지정 문 특성을 추가해도 작동하지 않습니다.

내가 작동하지 않는다고 말하면 일반적으로 요소를 클릭하면 입력 상자가 나타나고 요소를 클릭하면 아무 일도 일어나지 않습니다.

Glenn.directive('edit', function() { 
    return { 
     restrict: 'A', 
     template: '{{ content.' + 'ParamData' + '.data }}', 
     scope: { 
      ParamData: '@edit' 
     }, 
     link: function(scope, element, attrs) {  
      element.attr('editable-text', 'content.' + attrs.edit + '.data'); 
      element.attr('onbeforesave', 'update($data, content.' + attrs.edit +'.id'); 
     } 
    } 
}); 

내 첫 번째 문제는 내 안에 있기 때문에 xeditable 지시문이 작동하지 않는다는 것입니다. anglejs 지시문을 작성하는 것이 처음이지만, 컴파일되는 방식과 관련이 있는지 궁금합니다.

두 번째 문제점은 템플릿 때문입니다. 내 템플릿 그냥이

template: '{{ ParamData }}' 

과 같은 경우는 정확한 데이터를 출력,하지만 난 그게 범위의 데이터를 참조하는 다른 조각없이 작동 할 수 없습니다.

또한

는, 여기에보기는 지시 여기

<h2 edit="portrait_description_title"></h2> 

그리고를 사용 모습입니다 것은 내가 보일러 코드를 줄일 수있는 지시어를 사용하지 않은 경우처럼 보일 것 인 것이다

<h1 editable-text="content.portrait_description_title.data" onbeforesave="update($data, content.portrait_description_title.id)"> 
    {{ content.portrait_description_title.data }} 
</h1> 

어떤 조언을 주셔서 감사합니다!

Answer 1

당신은 그 속성을 추가 한 후 요소를 다시 컴파일 할 필요가 여기에 예입니다

예 plunker는 :http://plnkr.co/edit/00Lb4A9rVSZuZjkNyn2o?p=preview

.directive('edit', function($compile) { 
    return { 
    restrict: 'A', 
    priority: 1000, 
    terminal: true, // only compile this directive at first, will compile others later in link function 
    template: function (tElement, tAttrs) { 
     return '{{ content.' + tAttrs.edit + '.data }}'; 
    }, 
    link: function(scope, element, attrs) { 
     attrs.$set('editable-text', 'content.' + attrs.edit + '.data'); 
     attrs.$set('onbeforesave', 'update($data, content.' + attrs.edit + '.id)'); 
     attrs.$set('edit', null); // remove self to avoid recursion. 
     $compile(element)(scope); 
    } 
    } 
}); 

고려할 사항 :

• 처음에는 컨트롤러 content.portrait_description_title.data의 범위에 바인딩을 직접 수행하려는 것처럼 격리 된 범위를 제거하여 작업을 단순화했습니다.
• template:도이 기능을 사용하면 edit 속성 값을 템플릿을 생성 할 수 있습니다.
• 표시를 terminal 지시문으로 올리고 priority을 올리면 처음 실행될 때 (이 요소의 다른 요소 중)이 컴파일 될 수 있습니다.
• attrs.$set()은 속성을 추가/제거하는 데 유용하며 editable-text 지시문과 onbeforesave 지시문을 추가 할 때 사용합니다.
• 지시문 자체 (즉, edit 특성)를 제거하여 다음 컴파일 후 재귀를 방지합니다.
• $compile 서비스를 사용하여 요소를 다시 컴파일하면 editable-text 및 onbeforesave이 작동합니다.

희망이 도움이됩니다.

Answer 2

첫 번째 지시문의 템플릿 안에 또 다른 지시문을 추가하고 attr에서 가져온 범위 모델에 바인딩하면됩니다. 컨트롤러 기능을 추가하고 더 많은 모델 또는 로직을 생성하고 지시문 템플릿에 바인딩 할 수도 있습니다.

또한 고립 된 범위 모델에 $ watch를 추가하고 컨트롤러 내에서 다른 범위 모델을 업데이트해야 할 때보 다 템플릿의 속성을 사용할 수 없을 수도 있습니다. 두 번째 모델은 템플릿에 바인딩해야합니다. 당신은 또한 여기 AngularJS와 워드 프로세서에서 찾을 수 있지만, 지침에 대한 자세한 내용은 하나 개의 좋은 기사, 그것은 당신을 도울 수 있습니다

http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/