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，但在<select>中<div>中包含<span>的{{1}}是我多次执行的操作。有没有办法可以创建一个我可以像这样调用的指令，并且仍然让所有作用域在指令生成的实际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 file

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

要扩展Josep的评论，是的，你可以，这是一个可以做你想要的例子。

共享范围的关键是在指令中声明scope:false。这意味着您将使用父范围。然后，您需要做的就是包含您需要的模板。 e.g。

.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>'
    };
});

要使用，你只需要：

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

在声明中声明了所有其他ng属性

Answer 3

除了CaspNZ的答案，你可以分开关注意味着演示文稿html如下：

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

然后你需要my-directive-content.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>

然后你可以这个＆＃34;我的指示＆＃34;角度应用程序中的自定义指令。

我可以创建一个允许我创建HTML内容块的指令吗？

3 个答案: