我可以創建一個允許我創建HTML內容塊的指令嗎？

Question

我有這樣的代碼：

 <div> 
      <span>Type</span> 
      <select id="contentTypeSelect" 
        ng-change="home.configChanged(true)" 
        ng-model="ctrl.configService.admin.contentTypeId" 
        ng-options="item.id as item.name for item in ctrl.contentType.dataPlus">     </select> 
     </div> 

這是非常簡單的HTML，但封閉在一個<div>與<select>在該位置<span>是我做了很多次。有沒有一種方法可以創建一個我可以像這樣調用的指令，並且仍然使所有範圍在指令生成的實際HTML中正常工作。

 <div data-form-select> 
      label='Type' 
      id="contentTypeSelect" 
      ng-change="home.configChanged(true)" 
      ng-model="ctrl.configService.admin.contentTypeId" 
      ng-options="item.id as item.name for item in ctrl.contentType.dataPlus" 
     </div> 

還有一個問題。如果我這樣做，那麼這是通常做的事情？我想遵守最佳實踐，到目前爲止，我還沒有找到很多使用指令來做我想做的事情的很好的例子。

感謝

Answer 1

我覺得這是給所有的工作指令共同

JS文件

angular.module("directiveAPP", []) 
    .controller("directiveController", function ($scope, $rootScope) { 
    var admin = []; 
    var configService = { 
     "admin": admin 
    }; 
    var contentType = { 
     "dataPlus": [{ 
      "id": 1, 
       "name": "ABC" 
     }, { 
      "id": 2, 
       "name": "DEF" 
     }, { 
      "id": 3, 
       "name": "GHI" 
     }] 
    }; 
    $scope.home = {}; 
    $scope.ctrl = { 
     "configService": configService 
    }; 
    $scope.ctrl.configService.admin["contentTypeId"] = 0; 
    $scope.ctrl["contentType"] = contentType; 
    $scope.home.configChanged = function (data) {     
    }; 
}).directive("formSelect", function() { 
    return { 
     restrict: 'AE', 
     require: 'ngModel', 
     scope: { 
      label: '=', 
      id: '=', 
      ngChange: "&", 
      ngModel: "=", 
      options:"=" 
     }, 
     template: '<div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="item.id as item.name for item in options"></div>', 
     controller: function ($scope, $element, $attrs) {    
      $scope.label = $attrs.label; 
      $scope.id = $attrs.id;    
     } 
    }; 
}); 

HTML文件

<div ng-app="directiveAPP"> 
    <div ng-controller="directiveController"> 
      <data-form-select 
       data-label="Type" 
       data-id="contentTypeSelect" 
       data-ng-change="home.configChanged(true)" 
       ng-model="ctrl.configService.admin.contentTypeId" 
       data-options="ctrl.contentType.dataPlus"></data-form-select>     
{{ctrl.configService.admin.contentTypeId}} 
     <div ng-repeat="item in ctrl.contentType.dataPlus | filter:{'id':ctrl.configService.admin.contentTypeId}"> 
     id : {{item.id}}</br> 
     name : {{item.name}} 
     </div> 
    </div> 
</div> 

FIDDLE

Answer 2

爲了擴大對何塞普的評論，是的，你可以在這裏是會做你希望它是什麼的例子。

共享範圍的關鍵在於在指令中聲明scope:false。這意味着您將使用父範圍。然後，你需要做的就是包含你需要的模板。例如

.directive('dataFormSelect', function() { 
    return { 
     scope: false, 
     replace: true, 
     template: '<div>\ 
     <span>Type</span>\ 
     <select id="contentTypeSelect"\ 
       ng-change="home.configChanged(true)"\ 
       ng-model="ctrl.configService.admin.contentTypeId"\ 
       ng-options="item.id as item.name for item in ctrl.contentType.dataPlus">\ 
     </select>\ 
     </div>' 
    }; 
}); 

要使用，你就只有這個：指令

Answer 3

除了CaspNZ內

<div data-form-select> 
</div> 

正如你所聲明的所有其他的NG屬性回答，您可以分離出擔憂意味着這樣的演示html：

.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'my-directive-content.html' 
    }; 
    }); 

然後你需要my-directive-co ntent.html

 <div> 
     <span>Type</span> 
     <select id="contentTypeSelect" 
       ng-change="home.configChanged(true)" 
       ng-model="ctrl.configService.admin.contentTypeId" 
       ng-options="item.id as item.name for item in ctrl.contentType.dataPlus"> 
     </select> 
     </div> 

然後你可以在你的角度應用程序中這個「my-directive」自定義指令。