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