How do i Merge One Controller with in another Controller in HTML 5

Question

i'm beginner of HTML5. I have a two different Controllers. Separately it's working fine. when am trying to merge its not working. How do i configure controller with in a controller.

Code:

<div ng-controller="AppController">
// Read XML Tag and Display
<ul>
<li ng-repeat="image in dataSet">
//Loop
 <h2>{{image.title}}</h2>
 <div ng-controller="MainController">
 //Videogular - to play a video
 </div>
</li>
</ul>
<div>

Here both individually working. but when am trying to display the videogular with in the XML Display Controller, both doesn't work.

Videogular Controller's Code:

 //Controllers
 var videogularApp = angular.module("videogularApp",
[
    "com.2fdevs.videogular",
    "com.2fdevs.videogular.plugins.controlbar",
    "com.2fdevs.videogular.plugins.overlayplay",
    "com.2fdevs.videogular.plugins.buffering",
    "com.2fdevs.videogular.plugins.poster"
]
);


var controllerModule = angular.module('controllers', []);
controllerModule.controller("MainController", ["$scope", function (scope) {
scope.data = {
    "width": 300,
    "height": 264,
    "autoHide": false,
    "autoPlay": false,
    "themes": [
        {label: "Default", url: "themes/default/videogular.css"},
        {label: "Solid", url: "themes/solid/solid.css"}
    ],
    "stretchModes": [
        {label: "None", value: "none"},
        {label: "Fit", value: "fit"},
        {label: "Fill", value: "fill"}
    ],
    "plugins": {
        "poster": {
            "url": "assets/images/oceans-clip.png"
        }
    }
};

scope.theme = scope.data.themes[0];
scope.stretchMode = scope.data.stretchModes[1];
}]);

XML Controller's Code

angular.module('myApp.service',[]).
factory('DataSource', ['$http',function($http){
   return {
       get: function(file,callback,transform){
            $http.get(
                file,
                {transformResponse:transform}
            ).
            success(function(data, status) {
                console.log("Request succeeded");
                callback(data);
            }).
            error(function(data, status) {
                console.log("Request failed " + status);
            });
       }
   };
}]);
angular.module('myApp',['myApp.service']);

var AppController = function($scope,DataSource) {

var SOURCE_FILE = "download.xml";

xmlTransform = function (data) {
    console.log("transform data");
    var x2js = new X2JS();
    var json = x2js.xml_str2json(data);
    return json.rss.channel.item;
};

setData = function (data) {
    $scope.dataSet = data;
};

DataSource.get(SOURCE_FILE, setData, xmlTransform);

};

Are you missing something here, you haven't defined two controllers in your code ? — Jayantha Lal Sirisena, Feb 10 '14 at 06:11
miss configuration. the second one is Main Controller. I edited my question. — madhavan, Feb 10 '14 at 07:30

score 0 · Answer 1 · answered Feb 11 '14 at 09:32

You can't define your AppController like this:

var AppController = function($scope,DataSource) { ... }

If you want to create an AngularJS controller you need to create it with the controller() method:

angular.module('controllers', []).controller('AppController', function(){ ... });

Like you have done with MainController.

How do i Merge One Controller with in another Controller in HTML 5

1 Answers1