Question

这是我的角度代码：

   'use strict';

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

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/admin', {
            templateUrl: '/pages/admin/allcards.html',
            controller: 'MainController'
        })}]);

var factories=angular.module('appFactories',['ngResource']);
factories
    .factory('CardFactory',['$resource',
        function($resource) {
            return{
                all: $resource('/worldonlinenew/card/common', {}, {query: {method: 'GET', params: {id: '@id'}}}),
            }
        }])
    .factory('StaticFactory',['$resource',
        function($resource) {
            return{
                languages: $resource('/worldonlinenew/static/languages', {}, {query: {method: 'GET',isArray: true}}),
            }
        }]);

app.controller('CardController',function CardController($scope, CardFactory, StaticFactory){
    $scope.card=null;
    $scope.languages=null;

    $scope.translate=function(language, text){
        for(var i=0;i<text.translatedTexts.length;i++){
            if(text.translatedTexts[i].language==language){
                return translate;
            }
        }
    }

    $scope.initCard = function(id){
        $scope.card=CardFactory.all.query({id: id});
        $scope.languages=StaticFactory.languages.query({id: id});
    }
});

这是我的模板，我试图调用此函数：

</head>
<body ng-controller="CardController" >
<div class="container">

    <div th:attr="ng-init='initCard(\''+${id}+'\');'"></div>
    <h4 sec:authentication="name"></h4>

    <div class="row-fluid">
        <h1>Card ID: {{card.id}}</h1>
        <!-- Next two strings works fine -->
        <h1>name one: {{card.name.translatedTexts[0].content}}</h1>
        <h1>name two: {{card.name.translatedTexts[1].content}}</h1>
        <div ng-repeat="language in languages" ng->
            <h1 ng-bind="translate(language,card.name)"></h1>
        </div>
    </div>
</div>
</body>
</html>

我的浏览器的控制台打印出类似“无法获取translatedTexts未定义的内容，即text参数是未分解的。但是language参数是可以的，因为它在{{1}中声明}。

Answer 1

好的，在这里处理示例代码。如果card.name始终为undefined，则表示迭代器正在工作但var未准备好同时在同一范围内。查看示例并检查您的代码。

[更新] 是。 initCard函数中的问题。此功能同步＆＃39;但是$resource原生async（CardFactory.all.query，StaticFactory.languages.query）。你必须等待函数resolve。

示例：

app.controller('CardController',function($scope,CardFactory){

   init();

   /////////
   function init(){

      CardFactory.all.query({id:1})
       .$promise
       .then(function(result){
          // ready
       });

      // or
     CardFactory.all.query({id:1}, function(cards){
       // ... if
       $scope.cards = cards;
     });

   }
})

Answer 2

最后，这是答案！正如我写的那样，ng-bind=translate(language,card.name)在init函数之前执行，正如我们所见，在我的模型$scope.card=null;中。因此，字段card.name不仅为空，此字段也不存在。解决方案：

function Card(){
    this.id=new Number();
    this.name=new Text();
}

function Text(){
    this.id=new Number();
    this.name=new String();
    this.translatedTexts=new Array();
}

$scope.card=new Card();

将参数传递给模板中调用的函数

2 个答案: