Question

我有一段代码需要重用很多，因为我想为它创建一个指令。

<div class="btn-group">
    <div class="input-group">
        <div class="has-feedback">
            <input type="text" class="form-control" placeholder="BLAH BLAH" ng-model="model">
                <span class="times form-control-feedback" ng-click="model=''" ng-show="model.length > 0"></span>
        </div>
    </div>
</div>

我想在指令中使用此代码作为模板。创建一个如下使用的指令：

<div search-Field ng-model="model" placeholder="STRING"></div>

替换旧的html，ng-model和占位符将作为变量。

angular.module('searchField', [])  
.directive('searchField', [function () {
    return {
        scope: {
            placeholder: '@',
            ngModel: '='    
        },
        templateUrl: 'Partials/_SearchInputGroup.html'
    }
}]);


Is it the way of doing it?

Answer 1

看起来很好。

以下是您的示例 - http://plnkr.co/edit/LCWHRj6xc9bxwrgpaAb4

修正了指令中的少量拼写错误和绑定占位符和ngModel数据。

<强>模板：

<div class="btn-group">
  <div class="input-group">
    <div class="has-feedback">
      <input type="text" class="form-control" placeholder="{{placeholder}}" ng-model="ngModel">
      <span class="times form-control-feedback" ng-click="model=''" ng-show="ngModel.length > 0">Show</span>
    </div>
  </div>
</div>

将ng-model和place-holder值传递给指令

1 个答案: