AngularJS變量不解析/顯示

下面是相關HTML：AngularJS變量不解析/顯示

<!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"; 
    }); 
});

現在，一切都建立了，正是因爲它是上面（有一些額外的控制器爲其他頁面和所有），controllerMain的消息正確顯示：「這是主控制器」在HTML中的指定位置。

現在，我需要一個$ HTTP調用在controllerMain來進行的，所以我改變它，像這樣：

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調用完成，什麼都不顯示。如果我刪除了該呼叫，則會顯示該消息。

這裏有什麼問題嗎？這與程序的配置方式有關嗎？我不理解控制器的工作方式嗎？

來源

2014-07-21 elykl33t

，請嘗試刪除您don'e需要從控制器

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

來源

2014-07-21 18:27:19

@Raphael由於返回任何的回報！ –

刪除回報沒有做任何事情，我想我已經試過了。至於$ scope.message部分，我原本試圖做到這一點，但它不會工作，因爲我的index.html沒有關聯的控制器。所有的控制器都是使用$ routeProvider建立的，正如你上面看到的，我無法想出一個方法來添加索引並使其工作。當我在AngularJS站點的Plunkr中看到，我如何解決這個問題時使用了ng控制器和這個主控制器。 – elykl33t

你可以添加到你的身體標記如果你上傳jsfiddle或plunker我可以幫助你更多 –

AngularJS變量不解析/顯示

回答

相關問題