假设您的作用域中有一个对象数组,并且您希望使用指令更新它。我怎样才能做到这一点 ?我不确定应该做些什么。
重点是我想用名称和“卫星数据”更新范围,在这种情况下是id,但我们可以想象我们有更多。
问题:如果我不在UI中显示它,为什么我还需要id值?想象一下,我们正在与数据库交谈,并且数据库正在根据输入值+相应的id返回一个值。然后,在提交表单时将使用此ID。
还有一件事:我们不想直接从指令中访问people变量,因为这样的指令不是通用的。 我在这里创建了一个插件:http://plnkr.co/edit/D2ybe8uPSdzeIxTFzad5
HTML文件:
<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档案:
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};
}
}
};
});
答案 0 :(得分:0)
控制器中的$ scope是绑定到视图的内容。假设您的视图元素(div等)绑定到$ scope对象中的属性,只需像任何其他JavaScript对象一样更新属性,框架将处理其余的。
您可能必须将更新逻辑包装在$ scope附近。$ apply函数取决于您运行它的位置。
答案 1 :(得分:0)
您似乎尝试在指令中执行更多操作。什么是'newDict'?为什么要更改id值?为什么到名字的长度??!
我在插件中添加了以下行,这样您就可以在键入时看到正在修改的“人物”对象:
<p>{{people}}</p>
你的'customattr'指令什么都不做,所以我没有使用它。你可能想要在每个“家庭”中添加“添加孩子”按钮和“添加父母”?它们可以在html中直接调用控制器;我也加了这些。