AngularJS: привязка директивы

Question

Я пытаюсь создать пользовательский компонент текстового поля электронной почты, который имеет два поля. Для этого у меня есть этот шаблон:

<div class="custom"> 
    <div class="username" contenteditable="true"></div> 
    <div class="domain">@{{ domainValue }}</div> 
</div> 

Так что я могу ссылаться на директиву, которая вызывает этот шаблон, как:

<div ng-custom-txt></div> 

Из директивы Я хочу, чтобы иметь возможность передавать различные виды значений (домены) из модели под названием «нг-domaindata», как:

<div ng-domaindata="mydomain1.com" ng-custom-txt></div> 

Мой вопрос, как я могу связать директивы с полем «домен», который находится в шаблоне?

Я пытался использовать этот подход, но без успеха на всех:

Шаблон: customtemplate.html

<div class="custom"> 
    <div class="username" contenteditable="true"></div> 
    <div class="domain">@{{ domainValue }}</div> 
</div> 

Page

<div ng-domaindata="mydomain1.com" ng-custom-txt></div> 
<div ng-domaindata="mydomain2.com" ng-custom-txt></div> 

Директива

app.directive('ngCustomTxt', function() { 
    return { 
    restrict: 'A', 
    require: '^ngModel', 
    templateUrl: 'customtemplate.html', 
    link: function(scope, element, attrs, ctrl) { 
     scope.$watch(attrs.ngDomaindata, function (newValue){ 
     scope.domainValue = newValue; 
    } 
    } 
    } 
}); 

Очевидно, что это не сработает, так как я не могу отличить эти два элемента, может ли кто-нибудь помочь мне с этим?

Answer 1

Создать область действия для этой директивы. Кажется, что директива получает общий объем. Объявление области действия заставит получить новый экземпляр области.

Кроме того, наблюдатели выполняются, когда экземпляр, где был создан. В вашем случае это значение не задано для значения scope.domainData.

Постарайтесь проверить, действительно ли newValue, или использовать функцию $ observ.

app.directive('customTxt', function($parse) { 
    return { 
    restrict: 'A', 
    templateUrl: 'customtemplate.html', 
    scope : {}, 
    link: function(scope, element, attrs, ctrl) { 
     scope.domainValue = attrs.domaindata; 
     scope.$watch(attrs.domaindata, function (newValue){ 
      console.log('This code will execute when the instance where created. Getting a undefined newValue variable: ', newValue); 
      // verifying if the value is valid to set to the scope. 
      if (newValue != null) { 
       scope.domainValue = newValue; 
      } 
     }); 
    } 
    }; 
}); 

Working plunker