如何在 HTML 5 中将一个控制器与另一个控制器合并答案

【问题标题】：How do i Merge One Controller with in another Controller in HTML 5如何在 HTML 5 中将一个控制器与另一个控制器合并
【发布时间】：2014-03-07 07:48:11
【问题描述】：

我是 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 控制器的代码

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

};

【问题讨论】：

您是否遗漏了什么，您的代码中没有定义两个控制器？
错过配置。第二个是主控制器。我编辑了我的问题。

标签： html angularjs javascript-framework videogular

【解决方案1】：

你不能这样定义你的 AppController：

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

如果你想创建一个 AngularJS 控制器，你需要使用 controller() 方法创建它：

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

就像你对MainController所做的那样。

【讨论】：