Javascript AngularJs指令，用于创建包含数据对象的新指令

在我正在开发的应用程序中，用户可以从下拉列表中输入表单类型，并通过单击按钮时调用的指令创建新表单。创建的表单实际上是另一个指令，它被编译到作用域并附加到DOM中的包装器元素。下面是创建新指令的click指令的代码

(function(){
'use strict';

//on 'add new rule' btn click, a new form is created 

function createRuleForm($compile){

    function linkFn(scope, element, attrs){

        function onClickAddForm(){  

            var type = scope.rcCtrl.ruleType;
            var newDirective = angular.element('<rule-form type="'+type+'"></rule-form>');
            var formWrap = document.querySelector('.edit-rc__div--rf-wrapper');

            angular.element(formWrap).append(newDirective);
            $compile(newDirective)(scope)

        }

        element.bind('click', onClickAddForm)
    }

    return{
        restrict: 'A',
        link: linkFn 
    }   
}

angular.module('ganeshaApp')
.directive('createRuleForm', [
    '$compile',
    createRuleForm
])
})();

保存表单时，会将其添加到视图中的可滚动列表中

对于第一次创建和保存表单，这里的一切都很好。我遇到的困难是当用户需要从视图中的表单列表中打开表单时。与创建传递给新指令的数据为简单字符串“ruleType”的新表单不同，为完成的表单创建指令需要将保存的对象数据传递给新指令

(function(){
'use strict';

//on 'add new rule' btn click, a new form is created 

function createRuleForm($compile){

    function linkFn(scope, element, attrs){

        function onClickAddForm(){  

            var type = scope.rcCtrl.ruleType;
            var newDirective = angular.element('<rule-form type="'+type+'"></rule-form>');
            var formWrap = document.querySelector('.edit-rc__div--rf-wrapper');

            angular.element(formWrap).append(newDirective);
            $compile(newDirective)(scope)

        }

        element.bind('click', onClickAddForm)
    }

    return{
        restrict: 'A',
        link: linkFn 
    }   
}

angular.module('ganeshaApp')
.directive('createRuleForm', [
    '$compile',
    createRuleForm
])
})();

---

我只是想知道是否有人有过这种情况的经验，在这种情况下，click指令会创建一个需要打包数据的元素指令

编译元素时，应该能够将数据添加到范围中，然后在html中引用它

var type = scope.rcCtrl.ruleType;

var data = {'your': 'data', 'object': 'here'};

//add the data to the scope so that the child element has access to it
scope.data = data;

//pass the data into your rule-form directive using whatever attribute you declared 
var newDirective = angular.element('<rule-form type="'+type+'" form-data="data"></rule-form>');
var formWrap = document.querySelector('.edit-rc__div--rf-wrapper');

angular.element(formWrap).append(newDirective);
$compile(newDirective)(scope)

然后在RuleFormCtrl中，可以访问formData

function RuleFormCtrl($scope...){
    var data = $scope.formData;
}

---

我觉得这不太对，但我不确定自己是否完全理解。为什么不直接使用data和ng repeat来驱动表单条目和绑定，而不是动态地进行编译呢？如果你有一把琴弦/小提琴，我可以仔细看看，或者建议一个更好的方法谢谢你的回答，丹尼尔。我很抱歉，因为解释起来有点混乱。我曾考虑过使用ng repeat，但它似乎不太适合这个用例。用户希望看到他们正在处理的“规则”列表（这是视图中的ng repeat scrollable列表），但他们可能一次只想编辑一个，或者两个……本质上，他们希望随时控制他们的视图……但是现在想想，也许过滤器会提供一个解决方案。我看看以后能不能弄把小提琴。太好了，给我回电话。如果能，我会看的。根据你的评论，我会用过滤器来控制它。当你扩展解决方案时，沿着上面的道路走下去会让人非常困惑谢谢，Twitch！它正在工作，但我不得不做一些小的修改。如果在编译元素的指令中对象是scope.rcCtrl.data，我必须在新指令中使用$scope.$parent.rcCtrl.data访问它，因为作用域是隔离的。

function RuleFormCtrl($scope...){
    var data = $scope.formData;
}