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

为此指令创建范围。似乎该指令正在获得共享范围。声明范围将强制获取新的范围实例。

此外，观察者在创建实例时执行。在您的情况下，它将undefined设置为scope.domainData值。

尝试检查newValue是否有效，或使用$ observe function。

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

AngularJS：指令绑定

1 个答案: