javascript - Angularjs，单选按钮选择显示选择性 div(有输入)不起作用

Question

要求:单选按钮的选择应带有各自的输入框。下面是我的 html 和 Controller 的部分。我正在使用 ng-change 来调用 Controller 中编写的函数。 Controller 中的函数只是使用 jquery 显示 div。仅供引用，我的模板正在呈现，我在控制台上没有看到任何错误， Controller 中的函数也被调用。

问题 - 单击单选按钮时，相应的 div 未呈现。任何提示都将受到高度赞赏。

<div ng-app="app" ng-controller="FestCtrl">
   <form name="addForm" class="form-horizontal" ng-submit="submitForm(fest)">
      <!-- Options to user to either enter a new role OR select from an existing     one's -->
      <div class="btn-group" data-toggle="buttons">
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newfest()"> New
         </label>
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option2" autocomplete="off" ng-model="value" ng-change="existingfest()"> Existing
         </label>
      </div>
      <br>
      <br>
      <!-- Respective input will be presented depending on above selection-->
      <div id="addNewDiv" class="form-group">
         <label class="control-label" for="InputId">New</label>
         <input required type="text" class="form-control" id="groupIdInput" placeholder="Insert new fest" ng-model="fest.role">
      </div>
      <div id="selectExistingDiv" class="form-group">
         <label for="select1">Select</label>
         <select ng-model="fest.role" class="form-control" id="select1" ng-options="val for val in festArray">
            <option value="">Select</option>
         </select>
      </div>
   </form>
</div> 



var app = angular.module('App');
app.controller('FestCtrl', ['$scope', '$state', function($scope, $state) {
    $(function() {
        $("[data-hide]").on("click", function() {
            $(this).closest("." + $(this).attr("data-hide")).hide();
        });
    });
    $("#addNewDiv").hide();
    $("#selectExistingDiv").hide();
    $scope.newRole = function() {
        $("#addNewDiv").show();
    }
    $scope.existingRole = function() {
        $("#selectExistingDiv").show();
    }
}]);

Answer 1

在本例中，您面临的关键问题之一是由于将 jQuery 与 Angular 结合使用而导致的。在其他有问题的领域中，(在本问题 Is that a good practice to use jQuery with AngularJS? 中讨论)您正在通过引用 $. Angular 在其命名空间中使用了很多 $ 前缀的方法。

在你的 Angular Controller 中，你甚至不会有对 Window 对象的引用，而 jQuery 将其命名空间 ($) 附加到该对象。在 Angular 中，如果需要对 window 对象的引用，可以使用 $window 提供程序 https://docs.angularjs.org/api/ng/service/$window .

最后，关于将 jQuery 与 Angular 结合使用的主题，肯定存在需要接触 DOM 的情况。 Angular 处理此问题的范例称为指令。指令并不是非常容易理解，并且超出了本答案的范围，但我鼓励您在此处阅读有关它们的更多信息 -> https://docs.angularjs.org/guide/directive .

这是一个说明其工作原理的示例。

function FestController($scope) {

  $scope.state = {
    selected: 0,
    fest: {
      role: ""
    }
  };

}
angular.module("bacon", []);
angular.module("bacon").controller("FestController", FestController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bacon" ng-controller="FestController">
  {{state.selected}}
  <input type="number" ng-model="state.selected" />
  <form class="form-horizontal" id="addForm" name="addForm" ng-submit="submitForm(fest)">
    <!-- Options to user to either enter a new role OR select from an existing     one's -->
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input autocomplete="off" id="option1" name="options" ng-model="state.selected" ng-value="0" type="radio"> New</label>
      <label class="btn btn-primary">
        <input autocomplete="off" id="option2" name="options" ng-model="state.selected" ng-value="1" type="radio"> Existing</label>


    </div>
    <!-- Respective input will be presented depending on above selection-->

    <div class="animate-switch-container" ng-switch="state.selected">

      <div class="form-group" id="addNewDiv" ng-switch-when="0">
        <h1>
          {{state.fest.role}}
        </h1>
        <label class="control-label" for="InputId">New</label>
        <input class="form-control" id="groupIdInput" ng-model="state.fest.role" placeholder="Insert new fest" required="" type="text">
      </div>
      <div class="form-group" id="selectExistingDiv" ng-switch-when="1">

        <label for="select1">Select</label>
        <select class="form-control" id="select1" ng-model="state.fest.role" ng-options="val for val in festArray">
          <option value="">
            Select
          </option>
        </select>
      </div>
    </div>
  </form>
</div>

您可以看到我已经完全删除了对 jQuery 的任何引用以及对直接 DOM 操作的任何引用。

我选择使用 ng-switch 内置 Angular Directive(指令)，您可以在此处阅读 https://docs.angularjs.org/api/ng/directive/ngSwitch

将状态移动到 Controller 内附加到 $scope 的对象中，允许在模板中引用这些值，并允许双向绑定(bind)工作。

我还删除了 Controller 上的函数，以强调使用 switch 指令的双向绑定(bind)。当这些值在 $scope 上更新时，就会发生一些事情。您是否选择依赖此特定实现取决于偏好和架构问题，但这是您完成任务的一种方法。