Question

我正在尝试创建一个使用Angular动态构建表单字段的组件（我是新手）。

控制器包含我将在mainModel：

中查看的表单字段的数据

angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function ($scope) {

    // build the scope dynamically 
    $scope.mainModel = {
        "category_id": {
            "name": "category_id",
                "value": "1",
                "label": "Category Id"
        },
            "category_name": {
            "name": "category_name",
                "value": "First Category",
                "label": "Category Name"
        });

}]).directive('formLoader', function ($compile) {

    function link(scope, ele, attrs) {

        var html = '';
        jQuery.each(scope.mainModel, function (key, value) {
            //display the key and value pair
            console.log(key + ' --------------- ' + value);

            if (key == 'category_id' || key == 'category_name') {
                html += "<br />Testing<br /><kad-Input properties='mainModel." + key + "'></kad-Input>"
            }

        });

        var x = angular.element(html);
        ele.append(x);
        $compile(x)(scope);

    }

    return {
        restrict: 'E',
        scope: false,
        link: link
    };

}).directive('kadInput', function ($parse) {
    return {
        restrict: 'E',
        //transclude: true,
        scope: false,
        templateUrl: 'tests.html',
        link: function (scope, ele, attrs) {

            scope.properties = $parse(attrs.properties)(scope);
            console.log(scope.properties);

        }
    };
});

这个想法是循环遍历mainModel并基于主模型动态构建表单，这是formLoader指令的工作，这是我将在HTML中调用的唯一内容。

我创建了一个类似于＆＃34;标签的指令kadInput（仅用于测试）：文本输入＆＃34; html如下：

<div class="col-lg-2 col-md-2 col-sm-12 bottom-10" >
    <h4 class="header_label" ><label for="productName"> {{properties.label}} </label></h4>
</div>  

<div class="col-lg-9 col-md-9 col-sm-12" >
    <input type="text" id="productName" ng-model="properties.value" class="form-control" />
</div>

我得到了所需的结果，但问题是scope.properties kadInput不是指令唯一的，它只是将最后设置的数据带到它。

如何使每个指令的范围保持唯一，保持代码的相同方面？

Answer 1

你在这里做了很多不必要的事情，Angular指令你。我建议你仔细阅读directives guide - 这很容易理解。

这里的相关观点是“隔离范围”的概念，您明确选择使用scope: false（顺便说一下，什么都不做），然后从{{1}读取手动，这主要是否定了指令的设计目的。

您想要的是将对象传递给attrs，该对象将指定您希望隔离范围具有单个参数：

scope

这将为您设置数据绑定，并且它将使指令的实例之间的范围保持唯一。

根据每个指令使指令范围唯一？

1 个答案: