Question

我想提出一个有棱有角的指示，比如<my-directive/>。指令应该是：

<div>
    <input />
    <button></button>
</div>

我想将我添加到指令的属性复制到内部input元素。所以说如果我写

<my-directive ng-model="ctrl.some" 
              pattern="/.../" 
              placeholder="some placeholder for input" 
              required />

这些属性应该复制到我的指令中的输入。我能以一种好的方式实现这一目标吗？或者我应该以另一种方式制定我的指示？

Answer 1

首先，如果您正在创建自己的指令，我猜您不会使用ng-model和其他名称。

现在，假设我们创建了一个新指令my-directive

在指令定义中，我们可以将这些属性分配给指令scope上的变量，因此它们对内部控件是可见的。

像这样的东西

return {
    scope:{
        model:'=',
        myplaceholder:'='
    },
    link : //process the scope variables here, as required
    ...

    template:'<input ng-model="model" placeholder="{{myplaceholder}}"/> ... '

}

这样的东西（不是确切的代码），它应该有效。

将其用作：

<my-directive model="someScopeVar" myplaceholder="someOtherScopeVar">
</my-directive>

请注意{{ }}中myplaceholder周围的template，因为placeholder属性需要插值字符串而不是变量。

Answer 2

您可以在link函数中读取该指令的属性。在下面的示例中，第一个输入是文本输入，第二个是密码输入。输入的类型从指令属性传递。

传递ng-model更复杂。您应该使用隔离范围。

https://plnkr.co/edit/rxgE7BtVR9mEeqKhwfNn

的index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controlle="testCtrl">
    <h1>Test directive</h1>
    <test-directive required="true" type="text"></test-directive>
    <test-directive required="true" type="password"></test-directive>
  </body>

</html>

指令-template.html

<div>
  <input />
  <buuton>Button</buuton>
</div>

的script.js

var appModule = angular.module('myApp',[]);

appModule.controller('testCtrl',[]);
appModule.directive('testDirective',function(){
  return {
    templateUrl:'directive-tpl.html',
    link:function(scope,element,attr){
      var inputEl = element.find('input');
      inputEl.attr("required",attr.required);
      inputEl.attr("type",attr.type);
    }
  }
})

在angular指令中将属性从父控件复制到内部控件

2 个答案: