Question

我正在使用角度UI路由器并将我的页面分成部分视图然后加载它们。我注意到我似乎无法在部分视图上使用jquery。我有一个主索引页面，然后我使用角度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处理这些部分视图的任何想法？或者我应该跳过ui路由器并单独创建这些页面？

完全披露，如果它有帮助，我们将使用JAVA与JSP和Adobe的CQ5 CMS。我很乐意用.Net做这个，但是这个项目都是JAVA（我不是很熟悉）。这就是我尝试使用Angular的MVC设计模式的原因。

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

非常感谢任何帮助。

P

Answer 1

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

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

在部分：

<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）时，该值将在您的模型中更新。

Answer 2

哈！我终于想通了。

这就是我所做的。在进一步挖掘使用AngularJS预填充字段后，我遇到了这个问题：how to autopopulate text field in anguar js based on other form fields

然后这样做了：

在我的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

当我使用angularjs partials时如何运行jquery？

2 个答案: