Question

对选择选项值有疑问，我可以在选择选项更改时获取值，但是我无法通过搜索按钮获取选择选项的值，它只会给出值{{1 }}。那么问题出在哪里？

的index.html

undefined

controller.js

<div ng-controller="MatIncListCtrl">
  <button class="fluid labeled icon blue ui button top attached"><i class="ellipsis vertical icon"></i>Toggle Filters Pane</button>
  <div class="ui attached segment" uib-collapse="isCollapsed">
    <form role="form" class="ui form">
      <div class="fields">
        <div class="twelve wide field" ng-controller="DistinctSupplierCtrl">
          <label>Supplier</label>
          <select ng-model="Supplier" class="ui fluid dropdown" ng-options="x.supp_no as x.supp for x in data" ng-change="selectAction()">
            <option></option>
          </select>
        </div>
      </div>
    </form>
    <br />
    <button type="button" class="ui orange fluid labeled icon button" tabindex="0" ng-click="FindMatInc()"><i class="search icon"></i>Search</button>
  </div>
</div>

Answer 1

如果要从范围访问值，则必须确保它在该范围内或在其祖先的范围内。现在，您的ng-model在子范围内声明。如果要从父作用域访问它，则需要在父作用域中声明它。这样，当模型发生变化时，它在父范围内发生了变化，因此可以在两个范围内访问：

工作示例：

angular.module('App', []);

angular.module('App').controller('ControllerParent', [
             '$scope',
    function ($scope) {
        // Model value declared in parent scope
        $scope.selected = {};
    }
]);

angular.module('App').controller('ControllerChild', [
             '$scope',
    function ($scope) {
        $scope.options = [{
            id: 1,
            name: 'Alpha'
        }, {
            id: 2,
            name: 'Bravo'
        }, {
            id: 3,
            name: 'Charlie'
        }, {
            id: 4,
            name: 'Delta'
        }];
    }
]);

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    </head>
    <body ng-controller="ControllerParent">
        <div ng-controller="ControllerChild">
            <select ng-model="selected.value" ng-options="option.name for option in options"></select>
            ControllerSub: {{selected}}
        </div>
        ControllerMain: {{selected}}
    </body>
</html>

失败的例子：

angular.module('App', []);

angular.module('App').controller('ControllerParent', [
             '$scope',
    function ($scope) {}
]);

angular.module('App').controller('ControllerChild', [
             '$scope',
    function ($scope) {
        // Model value declared in child scope
        $scope.selected = {};
        $scope.options = [{
            id: 1,
            name: 'Alpha'
        }, {
            id: 2,
            name: 'Bravo'
        }, {
            id: 3,
            name: 'Charlie'
        }, {
            id: 4,
            name: 'Delta'
        }];
    }
]);

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    </head>
    <body ng-controller="ControllerParent">
        <div ng-controller="ControllerChild">
            <select ng-model="selected.value" ng-options="option.name for option in options"></select>
            ControllerSub: {{selected}}
        </div>
        ControllerMain: {{selected}}
    </body>
</html>

后代范围可以访问其祖先的值。祖先无法获得其后代的价值观。

Answer 2

使用controller as语法处理嵌套控制器的另一种方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script>
      angular.module('app', []);

      angular.module('app').controller("MainController", function(){
          var vm = this; //The vm in this case means viewmodel
          vm.title = 'AngularJS Nested Controller Example';
      });

      angular.module('app').controller("SubController", function(){
          var vm = this;
          vm.title = 'Sub-heading';
      });
    </script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
  <h1>{{main.title}}</h1>
  <div ng-controller='SubController as sub'>
    <h2>{{sub.title}}</h2>
    <p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
  </div>
</div>
</body>
</html>

AngularJS控制器无法在嵌套控制器中工作

2 个答案: