Question

角色新手，并有一个页面，我在其中定义了应用和控制器。在控制器之后，我试图显示一个从Node Rest调用回来的值（我得到的正确）。如果我放{{1 + 1}}我得到一个值... 我没有获得{{test}}或{{stock.symbol}}的价值 。我确实在firebug的范围变量中看到它们.... 不确定我对模块的定义做错了什么。任何帮助，将不胜感激！下面的代码片段......

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

  }]);

Answer 1

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

Answer 2

正如Alex C所提到的那样，你正在重新声明控制器文件中的app模块 - 正如文档在https://docs.angularjs.org/api/ng/function/angular.module所说明的那样 - 如果你想要检索现有模块，你需要省略第二个参数，例如。

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

因为你已经在你的controller.js中声明了你的tradingSystem模块并将其分配给一个全局变量（不是更大的应用程序的最佳方法，但可以用一个小例子），你需要删除var app = angular。模块（＆＃39; tradingSystem＆＃39;，[]）;

tradingSystem.controller('LoginCtrl', etc.

但你确实有tradeSystemControllers作为你的tradingSystem模块的依赖项，所以也许你想要放在你的控制器文件中：

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

编辑：20/7/2014

就设置更大的应用程序而言，不是我的提示或最佳实践，我只是关注这个领域的其他领导者所建议的，现在它对我有用; - ）

我认为https://github.com/ngbp/ngbp是按模块细分的Angular应用程序结构的一个很好的例子，所有文件（模块js，模板，less，单元测试）都与同一文件夹中的模块相关。 ngbp还具有良好的自动化工作流程，可以通过内置的业力测试，jshint等编译开发和生产构建。现在有很多有角度的种子/样板项目 - 不是说ngbp是最好的，因为我没有＆＃39 ; t详细查看了它们 - 但是我认为将所有相关模块文件放在模块文件夹中的方法是一个很好的方法，现在Angular团队提出的方法 - https://docs.google.com/a/core-ed.ac.nz/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
< / LI>
关于使用

var tradingSystem = angular.module（

我在第一个答案中提到过 - 假设您可以通过

angular.module('myModule')

将模块分配给全局变量并没有任何巨大优势，并且可能会使大型应用程序中的全局名称空间混乱。我喜欢其他几个方法提出的方法，即使用IIFE更好地封装每个模块 - 详情请参阅 - http://caughtexceptions.blogspot.co.nz/2014/07/angular-module-setup.html 为此，我稍微修改了ngbp构建过程，使用grunt-wrap将每个模块定义包装在自己的IIFE中，作为构建过程的一部分。

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

2 个答案: