个人中心
gpt4 book ai didi

javascript - Controller 未更新 AngularJS View

转载 作者：行者123 更新时间：2023-11-29 17:43:18 25 4
gpt4 key购买 nike

一切都在标题中...我无法让它工作:

(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)< 的值时， View 也不会更新 显示按钮没问题... $interval, $timeout, $apply, $watch 之类的东西的使用并没有解决问题。有什么想法吗？

感谢您的宝贵时间。

很抱歉，如果这是一个骗局；我只是找不到解决方案。

最佳答案

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

 <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>

关于javascript - Controller 未更新 AngularJS View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51769746/

25 4 0
文章推荐： javascript - 谷歌地图标记自定义上下文菜单
文章推荐： mysql - 计算引用特定行的行数，MySql 中的多个引用表？
文章推荐： mysql - 将地理空间点转换为纬度/经度字段
文章推荐： android - swipeRefreshLayout appcompat 圈
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com