Question

一切都在标题中... 我无法使它正常工作：

(function(angular) {
  'use strict';
  angular.module('app', [])
    .controller('ctrl', ['$scope', function($scope) {
      $scope.init = function() {
        $scope.response = "press the button";
      }();

      $scope.data = {
        availableOptions: [{
          id: '1',
          name: 'num'
        }],
        selectedOption: {
          name: 'selected field'
        }
      };

      $scope.data2 = {
        availableOptions2: [{
            id: '0',
            name: 'null'
          }
        ],
        selectedOption2: {
          name: 'null'
        }
      };

      $scope.search = function() {
        $scope.response = "you pressed a button \\o/";
        alert($scope.response);
      };

      $scope.request = function(req) {
        $http(req).then(function() { /*successCallback*/ },
          function() { /*errorCallback*/ });
      };

    }]);
})(window.angular);

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
  <script src="analyzer.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ctrl" ng-show="true">
    <!--class="ng-hide" is automatically added when ng-show="false"-->

    <!--SEARCH-->
    <form name="myForm">
      <label for="mySelect">Select a field:</label>
      <select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
      <br/>
      <div style="color:#757575">
        <input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
        <div ng-show="true">
          or directly select your choice here...
          <select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
        track by option.id" ng-model="data2.selectedOption2"></select>
          <br/>
          <button style="color:#757575" ng-click="search()">
            ...and go!</button>
        </div>
      </div>
    </form>

    <!--RESPONSE-->
    <div ng-controller="ctrl" ng-show="true">
      <p>{{response}}</p>
    </div>
  </div>
</body>

</html>

我们可以看到，即使在此代码段中，当我更改$scope.response ...的值时视图也不会更新，并且alert($scope.response)显示该按钮还可以...使用$ interval，$ timeout，$ apply，$ watch之类的问题无法解决。有什么想法吗？

感谢您的时间。

对不起，如果是骗子；我只是找不到解决方法。

Answer 1

您将再次实例化控制器，这将重新创建控制器，在这种情况下，响应未定义，请删除

 <div ng-controller="ctrl" ng-show="true"> //remove ng-controller
      <p>{{response}}</p>
 </div>

工作片段：

(function(angular) {
      'use strict';
      angular.module('app', [])
        .controller('ctrl', ['$scope', function($scope) {
          $scope.init = function() {
            $scope.response = "press the button";
          }();

          $scope.data = {
            availableOptions: [{
              id: '1',
              name: 'num'
            }],
            selectedOption: {
              name: 'selected field'
            }
          };

          $scope.data2 = {
            availableOptions2: [{
                id: '0',
                name: 'null'
              }
            ],
            selectedOption2: {
              name: 'null'
            }
          };

          $scope.search = function() {
            $scope.response = "you pressed a button \\o/";
            alert($scope.response);
          };

          $scope.request = function(req) {
            $http(req).then(function() { /*successCallback*/ },
              function() { /*errorCallback*/ });
          };

        }]);
    })(window.angular);

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
  <script src="analyzer.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl" >
  <div ng-show="true">
    <!--class="ng-hide" is automatically added when ng-show="false"-->

    <!--SEARCH-->
    <form name="myForm">
      <label for="mySelect">Select a field:</label>
      <select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
      <br/>
      <div style="color:#757575">
        <input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
        <div ng-show="true">
          or directly select your choice here...
          <select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
        track by option.id" ng-model="data2.selectedOption2"></select>
          <br/>
          <button style="color:#757575" ng-click="search()">
            ...and go!</button>
        </div>
      </div>
    </form>

    <!--RESPONSE-->
    <div ng-show="true">
      <p>{{response}}</p>
    </div>
  </div>
</body>

</html>

控制器未更新AngularJS视图

1 个答案: