我在Angular JS中创建了一个插件，它以Json（Json Array）作为输入。
这个json是在客户端动态生成的 ＆＃34; （通过用户的一些选择/输入）＆amp;存储在变量中。
var jsonX = //This is an Eg Structure.
[
{
"ObjectName": "test",
"ObjectTarget": "http://asdf.com/test.jpg",
},
{
"ObjectName": "test1",
"ObjectTarget": "http://asdf.com/test2.jpg",
}
] ;
我想将此变量jsonX传递给控制器。
我还要求我可以在单个页面中多次使用该插件，但使用不同的变量对其进行初始化。
迄今为止的进展：
我已经使用静态输入实现了这一点。需要一种传递动态数据的方法
//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",
}
] ;
});
//＆安培; HTML
<div ng-controller="ObjectController">
<!-- How can I pass the variable name through some tags Eg: ng-init = "jsonx" -->
</div
--------- @ worldAsk完整源代码
---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>
答案 0 :(得分：0)
<div ng-controller="ObjectController" ng-init="init(jsonx)">
</div>
MyApp.controller('ObjectController', function ($scope) {
$scope.init = function(jsonx) {
$scope.ObjectList = json;
}
}
答案 1 :(得分：0)
是不正确的，您无法通过指令到达Html Side上的Js变量，只能在指令中访问角度对象。所以你应该将你的jsonx变量传递给角度对象 “$ scope.jsonx = jsonx”然后你就可以达到并且没有未定义的错误。
答案 2 :(得分：0)
这篇文章给了我一个解决方法。
AngularJS access scope from outside js function
我在控制器中添加了一个方法，它将重置我的列表：
$scope.SetObjectList = function (NewList) {
$scope.ObjectList = NewList;
$scope.TotCnt = $scope.ObjectList.length;
$scope.CurrentIndex = 0;
};
＆安培;需要时从外部设置数据源：
<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>