AngularJS - 范围变量不显示在页面上

新的角和有一个页面，我有应用程序和控制器定义。控制器后，我试图显示我从节点休息电话（我正确得到）返回的值。如果我把{{1 + 1}}我得到一个值... 我没有得到{{test}}或{{stock.symbol}}的值。我确实看到他们在萤火虫的范围变量.... 不知道我在做什么错误的模块的定义。任何帮助，将不胜感激！代码片段如下...AngularJS - 范围变量不显示在页面上

HTML 
===== 
<html lang="en" ng-app="tradingSystem"> 
.. 
.. 

{% block content %} 

    {% include "includes/carousel.html" %} 

    <div class="container" ng-controller="StockListCtrl"> 
    <h3>Test: {{ test }} </h3> 
    <h3>Symbol: {{ stock.symbol }}</h3> 


{% block content %} 

    {% include "includes/carousel.html" %} 

    <div class="container" ng-controller="StockListCtrl"> 
    <h3>Test: {{ test }} </h3> 
    <h3>Symbol: {{ stock.symbol }}</h3> 

App.JS 
======= 
'use strict'; 

/* App Module */ 

var tradingSystem = angular.module('tradingSystem', [ 
    'ngRoute', 
    'tradingSystemAnimations', 
    'tradingSystemControllers', 
    'tradingSystemFilters', 
    'tradingSystemServices' 
]); 

controllers.js 
============= 
'use strict'; 

/* Controllers */ 

var app = angular.module('tradingSystem', []); 

app.controller('LoginCtrl', ['$scope', 'User', function($scope, User) { 

    $scope.authenticate = function (user) 
    { 
     $scope.user = User.authenticate({emailAddress: user.emailAddress, password:   user.password}); 
    alert("Received " + $scope.user); 
    }; 

}]); 


app.controller('StockListCtrl', ['$scope', '$http', function($scope, $http) { 

    $scope.test = 'This is a test'; 

    $http.get('/api/stocks') 
     .success(function (stocks) { 

     if (!stocks) { 
      console.log("No results from api/stocks service "); 
     } 
     else 
     { 
      $scope.stocks = stocks; 

      console.log("Results: " + stocks); 
      console.log("Stocks Fetched: " + $scope.stocks.length) 

      $scope.stock = stocks[0]; 
      console.log("Scope: " + $scope); 
      alert(stocks[0].symbol); 
      console.log($scope); 
     } 
     }) 
     .error(function (reason) { 
     alert(reason); 
     }); 

    }]);

来源

2014-07-17 Don

不确定为什么要声明你的应用两次，这可能是一个问题。如果你可以在plnkr中重现它，这将有所帮助。 –

亚历克斯Ç提到您要重新声明在控制器文件的应用模块 - 作为文档注意在https://docs.angularjs.org/api/ng/function/angular.module - 如果你是想获取你需要离开现有模块关闭第二个参数，例如。

angular.module('myModule', []); //creates a new module 
angular.module('myModule'); //retrieves an existing module

因此给您已经声明了tradingSystem模块，并将其分配给一个全局变量（不适用于较大的应用程序的最佳方法，但确定了一个小例子）在controller.js您需要删除变种app = angular.module（'tradingSystem'，[]）;并有

tradingSystem.controller('LoginCtrl', etc.

，但你在你的控制器确实有tradingSystemControllers为您tradingSystem模块的依赖性，所以也许文件你的意思是把：

var tradingSystemControllers = angular.module('tradingSystemControllers', []);

编辑：20/7/2014

至于建立更大的应用程序，不是我的提示或最佳实践，我只是跟随该领域的其他领导者建议，它现在正在为我工作;-)

我认为https://github.com/ngbp/ngbp是Angular应用程序结构按模块分解的一个很好的例子，所有文件（模块js，模板，更少，单元测试）都与同一文件夹中的模块相关。 ngbp还有一个很好的自动化工作流程，用于编译一个dev和生产版本，内置karma测试，jshint等等。现在有很多角度种子/锅炉项目 - 并不是说ngbp是最好的，因为我没有看着他们都在细节 - 但把所有相关模块的方法在模块文件的文件夹在一起是一个很好的，我认为，和由角队提出的办法了 - https://docs.google.com/a/core-ed.ac.nz/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
关于使用

VAR tradingSystem = angular.module（

我mentione d在我的第一个答案 - 因为你必须通过

angular.module('myModule')

轻松地访问任何角度的模块分配模块的全局变量没有任何巨大的优势，并有可能在杂波的大型应用程序中的全局命名空间。我喜欢其他几个人提出的方法，即使用IIFE将每个模块封装得更好一些 - 细节在这里 - http://caughtexceptions.blogspot.co.nz/2014/07/angular-module-setup.html 为此，我已经稍微修改了ngbp构建过程，以便使用grunt-wrap来包装每个模块作为构建过程的一部分，在其自己的IIFE中定义。

来源

2014-07-18 01:18:11 glendaviesnz

太好了，谢谢，我会给它一个机会。感谢您花时间回答！ – Don

我也很想看到关于开发大型AngularJS应用程序的技巧/最佳实践。谢谢... – Don

太好了 - 很高兴你把它分类 - 在我的答案中增加了一些关于大型应用程序结构的细节。 – glendaviesnz

该问题与使用Swig作为我的渲染引擎与Express有关。一旦我加了sw。setDefaults（{varControls：['<％='，'％>']}）; //或除[[{{'，'}}']之外的任何内容来更改默认值，页面将呈现AngularJS变量。

来源

2014-07-19 23:33:55 Don

AngularJS - 范围变量不显示在页面上

回答

相关问题