如何在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显示或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'仍计算为truthy。