Question

几天前我开始在Angular工作，我遇到了一个我不知道如何修复的问题。我的网站正在调用controller.js，这个控制器调用ajax函数。 ajax函数发回了正确的响应，但我无法在网络上看到它。这是代码：

var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
    productInformation = function($scope) { 
        var something;
        $.ajax({
            type: "GET",
            dataType : "json",
            async : true,
            url : "/ajax/reference/200-B2",
            success : function(data) {
                something = data.david;
                alert(JSON.stringify(something));
                $scope.helper = JSON.stringify(something);      
            },
            complete : function($scope) {
                $scope.helper = JSON.stringify(something);
                alert($scope.helper);
            }
        });
    };
}]);

这给了我一个正确的答案，但是当我在HTML中执行此操作时，我看不到答案。（即使警报包含所有信息）

<div ng-controller="ResolveProduct">
    <input ng-model="info"></input> information is: {{ $scope.helper }}

    <input type="button" id="commitAction" class="slim-button" value="Resolve"  onclick="productInformation('')"/>
</div>

Answer 1

您不需要在html端调用$scope，因此将{{$scope.helper}}更改为{{helper}}

<div ng-controller="ResolveProduct">
                <input ng-model="info"></input> information is: {{ helper }}

                <input type="button" id="commitAction" class="slim-button" value="Resolve"  onclick="productInformation('')"/>
            </div>

更新

您已将空值传递给$scope方法的onclick="productInformation('')"。因此清除$scope值。

请复制并覆盖我的代码，而不是代码。

Js代码

var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
    $scope.productInformation = function() 
          { 
              var something;
                  $.ajax({
                  type: "GET",
                  dataType : "json",
                  async : true,
                  url : "/ajax/reference/200-B2",
              success : function(data){

                  something = data.david;
                  alert(JSON.stringify(something));
                  $scope.helper = JSON.stringify(something);

              },
              complete : function($scope){
                  $scope.helper = JSON.stringify(something);
                  alert($scope.helper);
              }
          });

          };
}]);

Html代码

<div ng-controller="ResolveProduct">
                    <input ng-model="info"></input> information is: {{ helper }}

                    <input type="button" id="commitAction" class="slim-button" value="Resolve"  **ng-click="productInformation()"**/>
                </div>

此外，我已在您的按钮中将onclick更改为ng-click，并在您的js方面为$scope分配了该功能（请参阅更改productInformation至{{1} }）

Answer 2

您应该使用{{ helper }}代替{{ $scope.helper }}。

此外，在$scope.helper = JSON.stringify(something);后，您应添加$scope.$apply()。

您需要致电$scope.$apply()，因为您要在摘要循环之外为$scope.helper分配一个值（因为您正在使用jQuery中的$.ajax）。

可以在此处找到角度摘要循环的解释：How do I use $scope.$watch and $scope.$apply in AngularJS?

Answer 3

请检查它是否有效

<div ng-controller="ResolveProduct">
    <input ng-model="info"></input> information is: {{helper }}

   <input type="button" id="commitAction" class="slim-button" value="Resolve"  onclick="productInformation('')"/>
        </div>

你不能在这里使用$ scope 请参考以获取帮助： http://www.bennadel.com/blog/2457-accessing-scope-on-the-dom-using-angularjs.htm

不会将$ scope发送到html

3 个答案:

更新