pass a json variable to a controller in AngularJS

Question

I am creating a Plugin in Angular JS which takes Json (Json Array) as an input.

This json is "dynamically generated on the client side" (via some selections/ input by the user) & is stored in a variable.

var jsonX = //This is an Eg Structure. 
[

    {
        "ObjectName": "test",
        "ObjectTarget": "http://asdf.com/test.jpg",
    },
    {
        "ObjectName": "test1",
        "ObjectTarget": "http://asdf.com/test2.jpg",
    }
] ;

I want to pass this variable jsonX to the controller.

I also have a requirement that I can use the plugin as many times in a single page but initialize it with different variables.

Progress So Far :

I have achieved the thing using static inputs. Need a way to pass dynamic data

//Js File
MyApp.controller('ObjectController', function ($scope) {
    $scope.title = "Hello Title";

**//--How Can i pass a variable on my page to this. 
// $scope.ObjectList = jsonX ;**

    $scope.ObjectList = [   
    {                     
        "ObjectName": "test",
        "ObjectTarget": "http://asdf.com/test.jpg",
    },
    {
        "ObjectName": "test1",
        "ObjectTarget": "http://asdf.com/test2.jpg",
    }
 ] ;

});

//& The HTML

<div ng-controller="ObjectController">
 <!-- How can I pass the variable name through some tags Eg: ng-init = "jsonx" -->



</div

---------@worldAsk The Full Source Code

---ngObjectControl.js ---------------

'use strict';

/* Controllers */

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

MyApp.controller('ObjectController', function ($scope) {
    $scope.title = "Hello Title";
    $scope.CurrentIndex = 0;

    $scope.init = function (initVar) {        
        $scope.ObjectList = initVar; //init var is undefined
        $scope.TotCnt = $scope.ObjectList.length;
    };

    /*
    $scope.ObjectList = [

    {
    "ObjectName": "FROX001",
    "ObjectTarget": "http://asdf.com/frox001.jpg",
    "ObjectType": "Image",
    "ObjectData": "Fiirst Waala"
    },
    {
    "ObjectName": "FROX002",
    "ObjectTarget": "http://asdf.com/frox001.jpg",
    "ObjectType": "pdf",
    "ObjectData": "Second Waala"
    },
    {
    "ObjectName": "FROX003",
    "ObjectTarget": "http://asdf.com/frox001.jpg",
    "ObjectType": "icon",
    "ObjectData": ""
    },

    {
    "ObjectName": "FROX004",
    "ObjectTarget": "http://asdf.com/frox001.jpg",
    "ObjectType": "Image",
    "ObjectData": "Fourth Waala"
    }

    ];

    */


    $scope.movePrev = function () {

        if ($scope.CurrentIndex <= 0) {
            return;
        }
        $scope.CurrentIndex = $scope.CurrentIndex - 1;
    }

    $scope.moveNext = function () {

        if ($scope.CurrentIndex == $scope.TotCnt - 1) {
            return;
        }
        $scope.CurrentIndex = $scope.CurrentIndex + 1;

    }

});

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyApp">
<head runat="server">
    <title></title>

    <script>

        var jsonx = [

    {
        "ObjectName": "FROX001",
        "ObjectTarget": "http://asdf.com/frox001.jpg",
        "ObjectType": "Image",
        "ObjectData": "Fiirst Waala"
    },
    {
        "ObjectName": "FROX002",
        "ObjectTarget": "http://asdf.com/frox001.jpg",
        "ObjectType": "pdf",
        "ObjectData": "Second Waala"
    },
    {
        "ObjectName": "FROX003",
        "ObjectTarget": "http://asdf.com/frox001.jpg",
        "ObjectType": "icon",
        "ObjectData": ""
    },

    {
        "ObjectName": "FROX004",
        "ObjectTarget": "http://asdf.com/frox001.jpg",
        "ObjectType": "Image",
        "ObjectData": "Fourth Waala"
    }

    ];
    </script>
</head>

<body>



<div class="ngObjControl" ng-controller="ObjectController"  ng-init="init(jsonx)">
    <div class="container">
        <div class="title" ng-if="title.length>0">
            {{title}}
        </div>
        <div class="Preview" ng-repeat="obj in ObjectList" ng-show="$index==CurrentIndex">

            <img ng-src="{{obj.ObjectTarget}}" ng-show="obj.ObjectType=='Image'" height="50"
                width="50" alt="{{obj.ObjectName}}" />

            <a ng-href="{{obj.ObjectTarget}}" ng-show="obj.ObjectType!='Image'" target="_blank">
                {{obj.ObjectName}} Click to Proceed
                <br />
            </a>

            <div class="objData" ng-show="obj.ObjectData.length>0">
                {{ obj.ObjectData }}
            </div>
        </div>
    </div>
    <div class="Gallery">
        <div class="GalleryBoxPrev">
            <input type="button" value="<<" ng-click="movePrev()" ng-disabled="$index==0" />
        </div>
        <div class="GalleryBoxContainer">
            <ul>
                <li ng-repeat="obj in ObjectList">{{obj.ObjectName}}
                    <img ng-src="" alt="{{obj.ObjectName}}" height="50" width="50" />
                </li>
            </ul>
        </div>
        <div class="GalleryBoxNext">
            <input type="button" value=">>" ng-click="moveNext()" ng-disabled="$index==(ObjectList.length-1)" />
        </div>
    </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="Scripts/ngObjectControl.js" type="text/javascript"></script>

</body> 

</html>

score 0 · Answer 1 · answered Sep 18 '14 at 11:35

0

<div ng-controller="ObjectController" ng-init="init(jsonx)">
</div>

MyApp.controller('ObjectController', function ($scope) {
  $scope.init = function(jsonx) {
    $scope.ObjectList = json;
  }
}

answered Sep 18 '14 at 11:35

worldask

1,837
3
22
37

I had tried this. however I am getting it as undefined inside the init function. The jsonx variable is defined in the html file before initialization of other scripts. – Abdul Rehman Sayed Sep 18 '14 at 11:48
can you save it to somewhere like a hidden input, then bind it to angular. like this `` – worldask Sep 18 '14 at 12:19
If I bind the variable to the input field, how can i consume it in the controller ? – Abdul Rehman Sayed Sep 18 '14 at 12:37
then you can use `$scope.jsonx` – worldask Sep 18 '14 at 12:39
It wont work. Coz I need to reuse the same controller with a different variable. I need some thing like having multiple image gallery in a single page but with different initialization inputs. – Abdul Rehman Sayed Sep 18 '14 at 12:52

score 0 · Answer 2 · answered Sep 18 '14 at 13:25

Is is not correct, You cant reach Js variables on the Html Side by directives , only angular objects are reachable in directives .So you Should pass your jsonx variable to angular object like "$scope.jsonx=jsonx" then you can reach and have no undefined error .

score 0 · Accepted Answer · edited May 23 '17 at 12:09

This post gave me a work around.

AngularJS access scope from outside js function

I added a method in the controller which will reset my list :

$scope.SetObjectList = function (NewList) {
    $scope.ObjectList = NewList;
    $scope.TotCnt = $scope.ObjectList.length;
    $scope.CurrentIndex = 0;
};

& set the data source from outside when needed:

<script > 

var ctrlx = document.getElementById("ngObjCtrl");

SetObjectCtrlDataSource(ctrlx, jsonx);


function SetObjectCtrlDataSource(ctrl, src) 
{
    var scope = angular.element(ctrl).scope();
    scope.$apply(function () {
    scope.SetObjectList(src);
    });
}

</script>

pass a json variable to a controller in AngularJS

3 Answers3