Question

我整天都在寻找答案，似乎无法做到这一点。

我通过单击编辑按钮将范围值profile_edit_mode设置为true或false。然后，该值将激活表单上的ng-hide和ng-show。

当我将其移入自定义指令时，ng-hide或ng-show无法正常工作。

我有以下内容。

HTML代码

<bos-input fieldname="firstname" title="First Name" place-holder="First Name" ng-model="user_profile_details.firstname" edit-mode="{{profile_edit_mode}}"></bos-input>

自定义指令。

enter code hereangular.module('aesthetics')
.directive('bosInput', function(){
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<div class="form-group">' +
                    '<label for="{{fieldname}}" class="col-lg-3 control-label">{{title}}</label>' +
                        '<div class="col-lg-9">' +
                        '<input ng-show="editMode" class="form-control" id="{{fieldname}}" ng-model="ngModel" placeholder="{{placeHolder}}">' +
                        '<div class="m-t-xs" ng-hide="editMode">{{ngModel}}</div>' +
                    '</div>' +
                  '</div>{{editMode}}',
        scope: {
            fieldname: '@',
            placeHolder: '@',
            title: '@',
            editMode: '@',
            ngModel: '='
        }
    }

})

表单输入正确呈现，除ng-show或ng-hide外，其他所有内容都正常工作。

我输出了editMode的值，以检查它是否正确更新并且是。

非常感谢任何帮助。

非常感谢布伦特

Answer 1

不使用@作为字符串传递profile_edit_mode，而是使用=，这将双向绑定实际值。

<bos-input ... edit-mode="profile_edit_mode"></bos-input>

指令

.directive('bosInput', function(){
    return {
        // Previous code...
        scope: {
            fieldname: '@',
            placeHolder: '@',
            title: '@',
            editMode: '=',
            ngModel: '='
        }
    }

})

这是有效的，因为当您使用@并传递字符串时，'false'仍会评估为真实。

如何在angularjs自定义指令的模板中使用ng-show和ng-hide？

1 个答案: