创建带有数据对象的新指令的AngularJs指令

Question

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

(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
])
})();

每个创建的新表单都有一个隔离作用域，因为用户需要同时处理多个表单并保存和编辑这些表单。'type' 作为属性传递给新表单。这是在点击时创建的新指令。

(function(){
'use strict';

function ruleForm(ModalService, CurrentDateService, SaveRule, RULE_PHRASE){

    var index = 0;

    //directive controller
    function RuleFormCtrl($scope, $element, $attrs){

        var rfCtrl = this;

        //values
        rfCtrl.ruleType = $scope.$parent.rcCtrl.ruleType;
        rfCtrl.ruleTitle = 'L_' + $attrs.type + index;
        rfCtrl.phrase = RULE_PHRASE[$attrs.type]    
        rfCtrl.fullDate = CurrentDateService.getCurrentDate()

        //functions
        rfCtrl.saveOneRule = saveOneRule;
        rfCtrl.closeRule = closeRule;

        //saves one rule on click of save button or on timeout
        function saveOneRule(){

        rfCtrl.html = $element.find('.edit-rf__div--textdiv').html();   

            var ruleObject = {
                'index' : index,
                'ruleText' : rfCtrl.ruleText,
                'ruleTitle' : rfCtrl.ruleTitle,
                'ruleType' : rfCtrl.ruleType,
                'typePhrase' : rfCtrl.phrase,
                'html' : rfCtrl.html,
                'fullHtml' : rfCtrl.phrase + rfCtrl.html
            }

            SaveRule.pushRule(ruleObject)
            $scope.ruleForm.$setPristine();
            index++;
        }

        function closeRule(){

            if($scope.ruleForm.$dirty){

                var modal = {
                    "mssg" : 'You have unsaved changes to this rule. Would you like to save them before closing?',
                    "confirm" : 'Yes, please.',
                    "reject" : 'No, thank you.'
                }

                ModalService.openModal(modal).
                then(function(res){
                    console.log(res)
                    saveOneRule();
                    $element.remove();
                }).catch(function(err){
                    console.log(err)
                })
            }else{
                $element.remove();
            }
        }

    }


    return{
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'modules/edit/edit-create/ruleForm.html',
        controller: RuleFormCtrl,
        controllerAs: 'rfCtrl'
    };

}

angular.module('ganeshaApp')
.directive('ruleForm', [
    'ModalService',
    'CurrentDateService',
    'SaveRule',
    'RULE_PHRASE',
    ruleForm
]);

})();

当表单被保存后，会添加到视图中可滚动的列表中。

对于首次创建和保存表单而言，一切都很顺利。但当用户需要从视图中的表单列表中打开一个表单时，就会出现困难。与创建新表单不同的是，在已完成的表单中创建指令需要将保存的对象数据传递给新的指令。

我想知道是否有人遇到过这种情况，即点击指令会创建一个元素指令，并需要与数据一起打包？

- hughesjmh

---

这对我来说感觉不太对，但我不确定我是否完全理解了。为什么不只是使用数据和ng-repeat来驱动表单输入和绑定，而不是全部动态地编译？如果您有一个plunkr / fiddle，我可以更仔细地查看它或建议更好的方法。 - Daniel Dawes

谢谢回复，丹尼尔。抱歉解释有点混乱。我考虑使用ng-repeat，但它似乎不太适合这种情况。用户想要看到他们正在处理的“规则”列表（这是视图中的ng-repeat可滚动列表），但他们可能只想一次编辑一个或两个...基本上他们希望随时控制自己的视图...但现在想想，也许过滤器会提供一个解决方案。我稍后会看看能否提供一个fiddle。 - hughesjmh

如果你这样做了，请在这里回复我，我会看一下。根据你的评论，我会使用过滤器来控制它。如果你扩展解决方案，上述方法会变得非常混乱。 - Daniel Dawes

Answer 1

当您编译元素时，应该能够将数据添加到您的作用域中，然后在您的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)

只需确保您的rule-form指令作用域正在查找该form-data属性

return{
    restrict: 'E',
    replace: true,
    scope: {
        formData: '='
    },
    templateUrl: 'modules/edit/edit-create/ruleForm.html',
    controller: RuleFormCtrl,
    controllerAs: 'rfCtrl'
};

然后在RuleFormCtrl中，您可以访问formData。

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

- TwitchBronBron

---

谢谢，Twitch！它正在工作，但我不得不进行一些小修改。如果对象是在编译元素的指令中的scope.rcCtrl.data，那么我必须使用$scope.$parent.rcCtrl.data在新指令中访问它，因为作用域是被隔离的。 - hughesjmh