javascript - 如何使对象/属性显示在指令中？

Question

这是我显示输入字段的指令:

JS:

 .directive('isField', function () {
    return {
        restrict: 'EA',
        template: '<div class="form-group">' +
      '<label class="col-sm-2 control-label">{{prop}}</label>' +
      '<div class="col-sm-10">' +
        '<label ng-if="obj.prop" class="control-label" style="font-weight:normal;">Yes</label>' +
        '<label ng-if="!obj.prop" class="control-label" style="font-weight:normal;">No</label>' +
      '</div>' +
    '</div>',
        scope: {
          obj: "@obj",
          prop: "@prop",
        },
        controller: function(){
        },
        link: function(scope,elem,attr,ctrl){
        }
    };
})

HTML:

<is-field obj="pano" prop="isOutRoom" class="ng-isolate-scope">
  <div class="form-group">
    <label class="col-sm-2 control-label ng-binding">isOutRoom</label>
    <div class="col-sm-10">
      <!-- ngIf: obj.prop -->
      <!-- ngIf: !obj.prop -->
      <label ng-if="!obj.prop" class="control-label ng-scope" style="font-weight:normal;">No</label>
      <!-- end ngIf: !obj.prop -->
    </div>
  </div>
</is-field>

但是 obj.prop 没有被评估，即使 obj.prop 为 true 指令也显示 No >.

示例 JSON:

pano:
{
  "objectId": "566f915b00b0814d65fa12e0",
  "isVirtualRoom": true,
}

我在指令的 scope: 部分做错了什么吗？

Answer 1

我认为错误出在你的模板中，并且恰好在 ng-if 中，你的模板应该是这样的

 .directive('isField', function () {
    return {
    restrict: 'EA',
    template: '<div class="form-group">' +
  '<label class="col-sm-2 control-label">{{prop}}</label>' +
  '<div class="col-sm-10">' +
    '<label ng-if="prop" class="control-label" style="font-weight:normal;">Yes</label>' +
    '<label ng-if="!prop" class="control-label" style="font-weight:normal;">No</label>' +
  '</div>' +
'</div>',
    scope: {
      obj: "@obj",
      prop: "@prop",
    },
    controller: function($scope){

    },
    link: function(scope,elem,attr,ctrl){
    }
};

})

这是一个worked demo