CODEWITHSUNDEEP
angularjs
Ivan Timoshin
Ivan Timoshin

Reputation: 579

Pass a parameter into function called in template

Here is my angular code:

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

And here is my template, where i'm trying to call this function:

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

My browser's console print something like "can't get translatedTexts of undifined, i.e. text parameter is undifined. But language parameter is ok, because it's declared in ng-repeat.

Upvotes: 1

Views: 1371

Answers (2)

Ivan Timoshin
Ivan Timoshin

Reputation: 579

Finally, here is the answer! As i've wrote, ng-bind=translate(language,card.name) executes before init function, and as we can see, in my model $scope.card=null;. So, field card.name not only empty, this field doesn't exists. Solution:

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

Upvotes: 0

diproart
diproart

Reputation: 762

Ok, working sample code here. If card.name always undefined it means when iterator working but var not ready on not in same scope in same time. See sample and check your code.

[Update] Yes. Problem in initCard function. This function 'sync' but $resource native async (CardFactory.all.query,StaticFactory.languages.query). And you must wait when function resolve.

Example: 

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

   }
})

Upvotes: 1

Related Questions