控制器未更新AngularJS視圖
[英]AngularJS view not updated by the controller
問題描述
一切都在標題中...我無法正常工作：
(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無法解決問題。 有任何想法嗎？
謝謝你的時間。
抱歉如果是騙子; 我只是找不到解決方案。
1 個解決方案
解決方案1
4 已采納 2018-08-09 14:35:33
您將重新實例化控制器，這將重新創建控制器，在這種情況下，響應未定義，請刪除
<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變量不會立即反映在View上，但會在Controller上更新
[英]AngularJS variable is not reflecting instantly on View but Updated on Controller
AngularJS，視圖未根據控制器的模態值更改進行更新
[英]AngularJS, View is not getting updated on change in Modal value from controller
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.