更新卫星数据范围 [英] Update scope with satellite data
问题描述
假设你有对象的数组在你的范围，并且你想用一个指令来更新它。我该怎么办呢？我真的不知道应该怎样做。
主要的一点是，我想更新的名称和卫星数据，这是在这种情况下，ID的范围，但我们可以想像，我们有更多的它。
问题：为什么我需要一个ID值无论如何，如果我不打扰显示在用户界面呢？想象一下，而不是我们所谈论到一个数据库，该数据库返回基于输入值+相应的ID值。在提交实例的形式时，该ID将被使用。
一件事：我们不想直接从该指令访问的人变量，因为那么该指令就不会一般。
我创建了一个普拉克在这里： http://plnkr.co/edit/D2ybe8uPSdzeIxTFzad5
HTML文件：
＆LT;机身NG控制器=MainCtrl＆GT;
＆LT;跨度NG重复=VAL在人们＆GT;
＆LT;输入customattr类型=文本NG模型=val.name/＆GT;
＆LT; BR /＆GT; ＆LT; BR /＆GT;儿童：
＆LT;跨度NG重复=V在val.children＆GT;
＆LT;输入customattr类型=文本NG模型=v.name/＆GT;
＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
＆LT; /身体GT;
JS文件：
VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围）{
$ scope.people = [{名：托托，ID：1，
孩子：
{名：约翰，ID：2}，
{名：玛丽，ID：3}
]
}];}）;app.directive（'customattr'，函数（）{
返回{
限制：'A'，
链接：功能（范围，元素，ATTRS）{
元素[0] = .onblur功能（）{
的console.log（你好+元素[0] .value的）;
//使输入的一些魔法处理与这里XHR请求......
//为示范XHR请求被findTheNewDict取代
VAR newDict = findTheNewDict（元素[0] .value的）;
的console.log（newDict）;
//现在，我们要更新数据的范围
//我们怎样才能做到这一点？
范围。$应用（功能（S）{
//我们没有变人的知识在这里
//我们只知道数据是包含名称和ID的字典
}）;
}
findTheNewDict =功能（输入）{
//只是一个虚拟的回报：没关系返回什么
//主要的一点是，我想更新正确的变量
//在这个数据的范围
返回{名：输入+A，标识：input.length};
}
} };
}）;
您似乎试图做多是在你的指令必要的。什么是newDict的呢？为什么要改变ID值？为什么名称的长度？！
我添加下面一行到你的普拉克，它可以让你看到你的'人'的对象，在键入时被修改：
＆LT; P＆GT; {{}人}＆LT; / P＆GT;
您'customattr'指令无所事事，所以我没有使用它。你可能想在每个家庭按钮添加子，并添加父？它们可以与直接函数调用到控制器的HTML;我说这些呢。
请参阅： http://plnkr.co/edit/ABaCc8lu5fBJJjpii5LP?p=preVIEW
Suppose that you have an array of objects in your scope and that you want to update it with a directive. How can I do that ? I am not really sure what should be done.
The main point is that I want to update the scope with the name and the "satellite data" which is the id in this case but we could imagine that we have more of it.
Question : Why would I need an id value anyway if I don't bother showing it in the UI ? Imagine that instead we are talking to a database and that the database is returning a value based on the input value + the corresponding id. This id will then be used when submitting a form for instance.
One more thing : we don't want to access directly to the people variable from the directive because then the directive wouldn't be general. I have created a plunk here : http://plnkr.co/edit/D2ybe8uPSdzeIxTFzad5
HTML file :
<body ng-controller="MainCtrl">
<span ng-repeat="val in people">
<input customattr type = "text" ng-model="val.name" />
<br /> <br/> Children :
<span ng-repeat="v in val.children">
<input customattr type = "text" ng-model="v.name" />
</span>
</span>
</body>
JS file :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.people = [{"name":"Toto", "id":1,
"children": [
{"name":"John","id":2},
{"name":"Mary","id":3}
]
}];
});
app.directive('customattr', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].onblur = function() {
console.log("Hello there" + element[0].value);
// make some magic processing of the input with a XHR request here...
// for the demonstration the XHR request is replaced by findTheNewDict
var newDict = findTheNewDict(element[0].value);
console.log(newDict);
// Now we want to update the scope with the data
// How can we do that ?
scope.$apply(function(s) {
// We have no knowledge of the variable people here
// We just know that the data is a dict containing a name and an id
});
}
findTheNewDict = function(input) {
// Just a dummy return : it doesn't matter what is returned
// The main point is that I want to update the right variable
// in the scope with this data
return {"name": input + "a", "id":input.length};
}
}
};
});
You appear to be trying to do more than is necessary in your directive. What is 'newDict' for? Why change the id values? Why to the length of the name??!
I added the following line to your plunk, which allows you to see your 'people' object being modified as you type:
<p>{{people}}</p>
Your 'customattr' directive is doing nothing at all, so I didn't use it. You probably want buttons to "Add child" in each "family" and to "Add parent"? They can be in the html with direct function calls to the controller; I added those too.
see: http://plnkr.co/edit/ABaCc8lu5fBJJjpii5LP?p=preview
这篇关于更新卫星数据范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
