使用模板中的NG-如果在AngularJS父NG-型号未定制指令结合[复制]

问题描述 投票:1回答:2

这个问题已经在这里有一个答案:

我试图创建一个自定义指令来渲染下拉列表(选择)。

app.directive("uiDropdown", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            'model': '=ngModel',
            'readOnly':'=?'

        },
            templateUrl : 'template/dropdownTemplate.html',
        link: function (scope, elem, attrs) {
        }
    };
});

该模板

<span ng-if="!readOnly">
<select ng-model="model"  >   
    <option value="1">One</option>   
    <option value="2">Two</option>   
    <option value="3">Three</option>
</select>

HTML代码中使用的指令是

  <ui-dropdown ng-model="region"  read-only='readOnly'>

该plunker代码plunker

如果我删除代码“NG-IF =‘!readOnly的’”从模板文件,它工作正常。如果我从改变“NG-IF”到“NG-秀”,它正在为好。

我失去了一些东西在这里?实际上,该指令是应该做更多的功能比这个例子中显示的。我perfer用NG-如果代替NG-表演。请解决此问题的帮助。

angularjs angularjs-directive
2个回答
0
投票

它具有与ng-if创建自己的子范围,那么你就直接使用原始的事实做。 ng-if实际上将创建一个没有关系父本地model布尔值。这将与ng-if一个问题,即使没有被通过指令中使用它了。

你可以通过一个对象,并读取/设置该对象的值解决此问题。以下是表明你ng-if问题不相关的指令,然后如何使用对象解决这个问题一个简单的例子:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.readOnly = false;
    $scope.primitive = "1";
    $scope.object = {
      selectedValue: "1"
    };
  })
  .directive('uiDropdown', function() {
    return {
      restrict: 'E',
      templateUrl: 'dropdownTemplate.html',
      scope: {
        model: '=ngModel',
        fieldName: '@',
        readOnly: '=?'
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <label>Readonly: <input type="checkbox" ng-model="readOnly" /></label>
  </div>
  <div>
    <h1>ng-if with primitive - no directive</h1>
    <h2>This will not work</h2>
    <div>
      Value: {{ primitive }}
    </div>
    <div ng-if="!readOnly">
      <select ng-model="primitive">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
  <div>
    <h1>ng-if with object - directive</h1>
    <h2>This will work</h2>
    <div>
      Value: {{ object.selectedValue }}
    </div>
    <ui-dropdown ng-model="object" read-only="readOnly" field-name="selectedValue"></ui-dropdown>
  </div>
  <script type="text/ng-template" id="dropdownTemplate.html">
    <div ng-if="!readOnly">
      <select ng-model="model[fieldName]">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </script>
</div>

0
投票

NG-如果包含这是真或假尝试声明

 <ui-dropdown ng-model="region"  read-only='true'>
© www.soinside.com 2019 - 2024. All rights reserved.