如何运行jquery当我使用angularjs的部分

How to run jquery when I'm using angularjs partials?

本文关键字：angularjs 何运行 运行 jquery      更新时间：2023-09-26

我正在使用angular UI路由器，并将我的页面分解为部分视图，然后加载它们。我注意到我似乎不能在部分视图上使用jquery。我有一个主索引页，然后我用angular js插入部分。

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

下面是一个索引页的例子，我在其中插入了部分:

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

然后是我的UI router:

$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在这些部分视图上工作有什么想法吗?还是我应该跳过ui路由器，单独创建这些页面?

充分披露，如果有帮助的话，我们正在使用JAVA与JSP和Adobe的CQ5 CMS。我很乐意用。net做这件事，但这个项目全是JAVA(我不是很熟悉)。这就是为什么我尝试使用Angular的MVC设计模式。

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

感谢您的帮助。

p

你应该熟悉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>

控制器中:

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

在AngularJS中，你有一些有用的指令来填充select元素并将它们绑定到你的模型。

的例子:

<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中存储的每个值填充您的select元素。然后，这个值会在你的模型中被更新，就像你在ngModel指令($scope.sourceSystem)中那样。

哈哈!我终于明白了。

这是我所做的。在深入研究了使用AngularJS预填充字段之后，我遇到了这个问题:如何在AngularJS中基于其他表单字段自动填充文本字段

然后这样做:

在我的app.js文件:

app.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV'
  }, {
    name: 'UNET',
    ossi: 'ADJ and ENG'
  }];
});

然后这是我的表单:

<div ng-controller="IntakeController">
   <h1>Intake Form</h1>
        <form name="intakeform">
         <div class="form-group">
            <label for="sourceSystem">Source System</label>
           <select class="form-control" ng-model="system" ng-options="s.name for s in systems" >
                <option value="">Select Source System</option>
           </select>   
        </div>
       <div class="form-group">
            <label for="otherSystem">Other Source System Indentifiers</label>
            <input type="text" ng-model="system.ossi" class="form-control" placeholder="Other Source System Indentifiers">
        </div>
    </form>                 
</div>

现在，当我单击源系统时，其他源系统标识符将自动填充。

感谢你的帮助，让我知道这可以用AngularJS而不是jQuery快速完成。

p

相关文章：