AngularJS：指令绑定

Question

我试图创建一个自定义电子邮件文本框组件，它有两个字段。要做到这一点，我有这个模板：

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

所以我可以调用指令调用该模板，如：

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

从我希望能够通过不同类型的值的指令（从模型域）被称为“NG-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> 

页

<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是否有效，或使用$ observe功能。

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