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

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？

How to use ng-show and ng-hide in an angularjs custom directive's template?

angularjs

ng-hide

angular-directive