Question

我正在尝试创建一个自定义指令以呈现下拉菜单（选择）。

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

如果我从模板文件中删除代码“ ng-if =“！readOnly””，则它可以正常工作。如果我从“ ng-if”更改为“ ng-show”，它也可以正常工作。

我在这里错过了什么吗？实际上，该指令应该比本示例中所示的指令执行更多的功能。我认为使用ng-if代替ng-show。请帮助解决此问题。

Answer 1

ng-if包含一个正确或错误的语句试试

<!DOCTYPE html>
<html>

    <head>

        <link href="header.css" rel="stylesheet">   
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

        <title>header</title>

    </head>

    <body>

        <div id="header">

            <div id="header_menu">

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PLÄNE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                    </div>

                </div>          

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PROFIL</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                    </div>

                </div>            

                <div class="header_menu_wrapper"><div class="header_menu_flexelement"><a href="../index.html">HOME</a></div></div>

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">TERMINE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                    </div>

                </div>   

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">KONTAKT</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                    </div>

                </div>    

            </div>

        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

    </body>

</html>

Answer 2

这与以下事实有关：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>

在模板中使用ng-if时，AngularJS父级ng-model未与自定义指令绑定

2 个答案: