Question

我有下一个代码：

appForm.directive('inputRadio', function(){
    return {
        restrict: 'E',
        link: function (scope, elem, attrs){

        },
        compile: function(elem, attrs){
            return {
                pre: function preLink( scope, elem, attrs ) {

                },
                post: function postLink( scope, elem, attrs ) {

                }
            }
        },
        template: '' +
        '<div class="radio">' +
        '<label class="required"><input type="radio" id="attrs.twigId" name="attrs.twigName" ng-model="optionMultipleChoice" ng-required="required" value="attrs.twigValue" >attrs.twigLabel</label> ' +
        '</div>'
    }
});

我想把具有变量＆＃34;的属性放在一起。 attrs＆＃34;直接进入模板，例如id =＆＃34; attrs.twigid＆＃34; 。不太好怎么做，如果你在编译或链接中这样做...

谢谢！

编辑：

appForm.directive('inputRadio', function(){
    return {
        restrict: 'E',
        link: function (scope, elem, attrs){

        },
        compile: function(elem, attrs){
            return {
                pre: function preLink( scope, elem, attrs ) {
                    scope.varstwig = attrs;
                },
                post: function postLink( scope, elem, attrs ) {

                }
            }
        },
        template: '' +
        '<div class="radio">' +
        '<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
        '</div>'
    }
});

此代码有效，但它有一个错误，如果有几个指令实例＆＃34;范围＆＃34;将覆盖，以便所有指令具有相同的值。

有没有人知道解决这个问题？

电话如下：

{% block _test_optionsExpanded_widget %}
    <div class="form-group">
        <label class="control-label required">Options expanded</label>
        <div id="test_optionsExpanded">
            {% for option in form.children %}
                <input_radio twigId="{{ option.vars.id }}" twigName="{{ option.vars.full_name }}" twigValue="{{ option.vars.value }}" twigLabel="{{ option.vars.label }}" twigShortName="{{ option.vars.name }}"></input_radio>
            {% endfor %}
        </div>
    </div>
{% endblock %}

Answer 1

我找到了解决方案..哈哈

如果我将变量范围定义为“@”，则不会覆盖它，并且每个指令都具有twig给出的特定值。

感谢所有人：）

appForm.directive('inputRadio', function(){
        return {
            restrict: 'E',
            scope: {
                varstwig: '@'
            },
            link: function (scope, elem, attrs){

            },
            compile: function(elem, attrs){
                return {
                    pre: function preLink( scope, elem, attrs ) {
                        scope.varstwig = attrs;
                    },
                    post: function postLink( scope, elem, attrs ) {

                    }
                }
            },
            template: '' +
            '<div class="radio">' +
            '<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
            '</div>'
        }
    });

Answer 2

如果我理解正确，您需要在HTML元素中设置的某些属性。只是隔离范围。

appForm.directive('inputRadio', function(){
    return {
    restrict: 'E',
    scope: {
       twigId : "=",
       twigName: "=",
       twigValue: "=",
       twigLabel: "="
    },
    link: function (scope, elem, attrs){

    },
    compile: function(elem, attrs){
        return {
            pre: function preLink( scope, elem, attrs ) {

            },
            post: function postLink( scope, elem, attrs ) {

            }
        }
    },
    template: '' +
    '<div class="radio">' +
    '<label class="required"><input type="radio" id="{{twigId}}" name="{{twigName}}" ng-model="twigValue" ng-required="required" >{{twigLabel}}</label> ' +
    '</div>'
}
});

这样的事情应该有效。您可能需要查看该无线电的参数。我不确定你想做什么。

请注意＆＃34; =＆＃34;在twigValue中：＆＃34; =＆＃34;和其他人有特定的含义。

使用＆＃34; =＆＃34;如果您的属性绑定到父作用域中其他位置的变量，或使用＆＃34; @＆＃34;如果你的属性只是一个值。

https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

将attrs指令放在模板中。 AngularJS

2 个答案: