javascript - 当我使用 angularjs 部分时如何运行 jquery？

Question

我正在使用 Angular UI 路由器，并将页面分成部分 View ，然后加载它们。我注意到我似乎无法在部分 View 上使用 jquery。我有一个主索引页面，然后使用 Angular js 插入部分内容。

我想在任何部分的代码上运行的任何类型的 jquery 都不起作用。

这是我在其中插入部分内容的索引页示例:

 <div id="page-content-wrapper">
     <div ui-view>

     </div>
 </div>

然后是我的 ui 路由器:

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'global/partials/home.html'
    })
    .state('search', {
        url: '/search',
        templateUrl: 'search/partials/search.html'
    })
    .state('intake', {
        url: '/intake',
        templateUrl: 'intake/partials/intake.html'
    })
});

以及一个部分(表单)的示例，我尝试运行一些 jquery 来找出表单字段的值:

<h1>Intake Form</h1>
         <form name="intakeform">
             <div class="form-group">
                  <label for="sourceSystem">Source System</label>
                     <select class="form-control" id="sourceSystem" ng-model="sourceSystem">
                       <option value="" selected disabled>Select Source System</option>
                       <option value="Cosmos DIV">COSMOS</option>
                       <option value="UNET">UNET</option>
                    </select>
            </dv>
       </form>

我必须根据这个初始字段的值自动填充接下来的三个字段，并且由于某种原因，如果最基本的 jQuery 不起作用:

function autoFill() {
    $('select').on('change', function() {
      alert( this.value ); 
    });
}

关于如何让 jQuery 处理这些部分 View 有什么想法吗？或者我应该跳过 ui 路由器并单独创建这些页面？

完全公开，如果有帮助的话，我们正在将 JAVA 与 JSP 和 Adob​​e 的 CQ5 CMS 一起使用。我很乐意使用.Net 来完成此操作，但该项目全部是JAVA(我对此不太熟悉)。这就是我尝试使用 Angular 的 MVC 设计模式的原因。

此外，我在浏览器控制台中没有收到任何错误，并且页面底部包含了所有必要的脚本。

非常感谢任何帮助。

P

Answer 1

您应该熟悉可以完成您正在寻找的工作的 Angular 指令。

基本上，在这里，您可以在select元素上使用ngChange。

部分:

<form name="intakeform">
         <div class="form-group">
              <label for="sourceSystem">Source System</label>
                 <select ng-change="updatefunction()" class="form-control" id="sourceSystem" ng-model="sourceSystem">
                   <option value="" selected disabled>Select Source System</option>
                   <option value="Cosmos DIV">COSMOS</option>
                   <option value="UNET">UNET</option>
                </select>
        </dv>
   </form>

在 Controller 中:

$scope.updateFunction = function() {
    // Do whatever you want here
}

编辑:

在 AngularJS 上，您可以使用一些有用的指令来填充 select 元素并将它们绑定(bind)到您的模型。

示例:

<form name="intakeform">
         <div class="form-group">
              <label for="sourceSystem">Source System</label>
                 <select ng-change="updatefunction()" ng-options="item in items" class="form-control" id="sourceSystem" ng-model="sourceSystem">

                </select>
        </div>
   </form>

它将为 $scope.items 中存储的每个值填充您的选择元素。然后，当您输入 ngModel 指令 ($scope.sourceSystem) 时，该值将在您的模型中更新。