어떻게 하나의 컨트롤러를 HTML 5의 다른 컨트롤러와 병합합니까?

Question

저는 HTML5의 초보자입니다. 나는 두 개의 다른 컨트롤러를 가지고있다. 별도로 잘 작동합니다. 병합하려고 할 때 작동하지 않습니다. 컨트롤러에서 컨트롤러를 어떻게 구성합니까?

코드 : 여기

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

개별적으로 작동합니다. XML 디스플레이 컨트롤러에 비디오를 표시하려고 할 때 둘 다 작동하지 않습니다.

Videogular 컨트롤러의 코드 :

//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 컨트롤러의 코드 당신이 같이 당신의 AppController를 정의 할 수 없습니다

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

}; 

Answer 1

:

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

을 당신이 AngularJS와 컨트롤러를 만들려면 controller() 메소드를 사용하여 생성해야합니다 :

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

MainController으로 끝났습니다.