ngtemplate에서 모델 별명 지정

Question

다른 템플리트에서 동일한 템플리트를 재사용 할 수 있도록 템플리트에 사용 된 모델의 별명을 지정하려고합니다. 예를 들어, 다음 모델의 경우 :

member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
} 

"구성원"과 "자식"모두 "이름"속성을가집니다. 그래서이 "name"속성을 다루는 하나의 템플릿을 만들고 싶습니다.

:

app.directive('member', function(){ 
return { 
    restrict: 'A', 
    template: "{{prefix}}<input type='text' ng-model='member.name'>", 
    scope: { 
     member: "=" 
    } 
}; 
}); 

다음은이 지침의 사용이다 :

Bind ngInclude to different models

내가 같은 지침을 작성, 제안으로 : 이 질문의 도움으로이를 달성 할 수 있었다

<div ng-controller="MemberCtrl"> 
    {{member | json}} 
    <div member="member"></div> 
    <div member="member.children[0]"></div> 
</div> 

내 지시어에 "범위"를 사용하고 있기 때문에 템플릿 재사용을 달성 할 수 있었지만, 컨트롤러 범위의 모든 속성에 액세스 할 수없는 범위입니다. 따라서 컨트롤러의 경우 :

app.controller('MemberCtrl', function($scope){ 
$scope.member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
}; 

    $scope.prefix = "Mr."; 
}); 

지시문 안의 템플릿은 "접두어"속성에 액세스 할 수 없습니다.

http://jsfiddle.net/vaibhavgupta007/mVBaC/1/

는 어떤이의 문제가 될 수있다 : 다음은 jsfiddle입니까?

나는 또한 접두사에 액세스 할 수 $ 부모를 사용할 수 있습니다

편집. 하지만이 깨끗한 접근 방식입니다.

Answer 1

지시어 정의 개체에서 'prefix'를 고립 된 범위 변수로 정의하고 요소 속성에서이를 참조하십시오.

app.directive('member', function(){ 
return { 
    restrict: 'A', 
    template: "{{prefix}}<input type='text' ng-model='member.name'>", 
    scope: { 
     member: "=", 
     prefix: "=" 
    } 
}; 
}); 

 

<div ng-controller="MemberCtrl"> 
    {{member | json}} 
    <div member="member" prefix="prefix"></div> 
    <div member="member.children[0]" prefix="prefix"></div> 
</div> 

Fiddle

Answer 2

고유의 템플릿에서 사용하기 위해 다양 한 컨트롤러 속성 (예를 들어, member 및 member.children[0])에 지시 범위 속성을 결합 할 수 있도록, 난 당신을 생각 격리 된 범위 구문을 사용해야합니다 (이미 발견했듯이).

당신은이 "범위 도로를 분리", 당신은 당신의 지시어로 추가 속성에 대한 액세스를 필요로하는 모든 컨트롤러의 특성과 기능을 지정해야합니다 아래로 이동하면 : 당신의 지시에 그런

<div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div> 

:

를

template: "{{prefix}}<input type='text' ng-model='member.name'>" 
    + "<br>fn result={{ joinFn({someName: member.name}) }}", 
scope: { 
    member: "=", 
    prefix: '@', 
    joinFn: '&' 
}, 

Fiddle

편도 문자열에 대한 양방향 데이터 바인딩, @에 대한 사용 =, 0 편도 식은입니다.