AngularJS에서 분리된 범위가 없는 지시 범위 속성

AngularJS에서 분리된 범위가 없는 지시 범위 속성

전달된 속성으로 확장하면서 상위 범위를 상속하는 방법이 있습니까?

링크 기능에서 DOM을 변경할 필요 없이 템플릿에서 직접 재사용 가능한 지시문으로 매개 변수를 전달하고 싶습니다.

예를 들어,

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>

다음과 같은 지시의 경우:

    <div class="form-group">
      <label>{{label}}</label>
      <div class="input-group">
        <div class="{{icon}}">@</div>
        <input class="form-control" placeholder="Email" ng-model="mail.email">
      </div>
    </div>

ng-model은 이 경우 전체 폼을 제어하는 상위 범위에 속하지만, 스타일링 속성을 컨트롤러에 저장할 필요는 없다고 생각합니다.

분리 범위를 만들지 않고 템플릿에서 직접 매개 변수를 전달하는 방법이 있습니까?

상위 범위를 이렇게 '확장'할 수 없습니다.그러나 지시어의 링크 함수에 주입된 지시어 태그 속성을 활용하여 목표를 달성할 수 있습니다.

예를 들어, 당신의 것을.label변수, 지시어의 링크 함수는 다음과 같습니다.

 link: function ($scope, $element, $attributes) {
         $scope.label = $scope.$eval($attributes.label);
        }

라이브 데모는 아래 플렁커를 확인하실 수 있습니다.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

Angad의 답변은 static linking이 가능하지만, 링크 후 속성 값이 변경될 수 있다면 업데이트되지 않습니다.필요한 경우 참조 대신 문자열로 값을 전달하는 것이 해결책입니다.

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input>

지시문에서 $Observe를 속성에 추가하여 스코프 변수를 업데이트합니다.

$attributes.$observe('label', function(newValue){$scope.label=newValue});

이제 속성 값이 변경되면 스코프 변수가 동적으로 변경됩니다.

언급URL : https://stackoverflow.com/questions/24651250/directive-scope-attributes-without-an-isolated-scope-in-angularjs