Question

以下是相关的HTML：

<!DOCTYPE html>
<html ng-app="wpApp">

<body>
<div ng-controller="controllerMain as main">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#two">Link 2</a></li>
            <li><a href="#three">Link 3</a></li>
        </ul>
    </div>

    <!-- Start of View State -->
    <div class="page-content" style="padding-left:10px; padding-right:10px">
        <div ng-view></div>
    </div>
    <!-- End of View State -->

    <div class="footer">
        <div class="banner">
            {{main.message}}    
        </div>
    </div>
</div>
</body>
</html>

这是相关的Javascript

wpApp = angular.module("wpApp", ["ngRoute", "ngAnimate", "ui.bootstrap", "angularFileUpload"]);

wpApp.config(function($routeProvider) {
  return $routeProvider.when("/", {
    templateUrl: "one.html",
    controller: "controllerOne"
  }).when("/two", {
    templateUrl: "two.html",
    controller: "controllerTwo"
  }).when("/three", {
    templateUrl: "three.html",
    controller: "controllerThree"
  });
});

wpApp.controller("controllerMain", function() {
  this.ready = 'true';
  this.message = "This is the Main Controller";
  });
});

现在，所有内容都完全按照上面的设置（其他页面和所有内容都有一些额外的控制器），在HTML中的指定位置正确显示controllerMain的消息：“这是主控制器”。

现在，我需要在controllerMain中进行$ http调用，所以我改变它是这样的：

wpApp.controller("controllerMain", function($http) {
  this.ready = 'true';
  this.message = "This is the Main Controller";
  return $http.get("config.json").success(function(data) {
    console.log("Here");
  });
});

发生这种情况时，我可以在日志中看到“此处”，但不会显示应显示“{{main.message}}”的内容。一点调试告诉我，基本上如果进行了$ http GET调用，则不会显示任何内容。如果我删除了呼叫，则会显示该消息。

这是什么问题？它与程序的配置方式有关吗？我不了解控制器的工作方式吗？

Answer 1

请尝试删除您不需要从控制器返回任何内容的退货

wpApp.controller("controllerMain", function($scope, $http) {
  $scope.ready = 'true';
  $scope.message = "This is the Main Controller";
  $http.get("config.json").success(function(data) {
    console.log("Here");
  });
});

我还建议使用$scope.message = "This is the Main Controller"; 并在html {{message}}

上

AngularJS变量无法解析/显示

1 个答案: