有点难以解释, 我们已经完成了这个样本
https://egghead.io/lessons/angularjs-understanding-isolate-scope
但它与我们想要达到的目标并不完全相符。
我们已经构建了一个只需设置myData的控制器
ClinicalNotesCtrl.controller('notesController', function notesController($scope, $http, $modal, $log) {
$scope.myData = { name: "Moroni", age: 50, result: "Sodium" };
$scope.changename = function (h) {
h.name = "Simon";
h.age = "34";
h.result = "This is a test";
}
});
以下是名为kid的指令。这只是打印出值
Results.directive("kid", function () {
return {
restrict: "E",
// scope: { myValue: '=simon' },
// scope:{},
template: '<input type="text" ng-model="myData.name">{{myData.name}}' // '<div>{{$scope.timelineactivitydata}}</div>',
};
});
最后这是HTML页面,
<kid simon="myData"></kid>
<label ng-click="changename(myData)">Change Name</label>
<kid simon="myData"></kid>
<label ng-click="changename(myData)">Change Name</label>
<kid simon="myData"></kid>
<label ng-click="changename(myData)">Change Name</label>
我们想要实现的是以某种方式将特定标签与kid指令相关联,这样当点击标签时,只有相关的孩子会更改其名称,而不是所有名称。
希望有道理,
根据评论的要求, 请看看plunker: -
plnkr.co/edit/3NMBNTrLT29EIFNo9lbA?p=preview
答案 0 :(得分:0)
我在这里发布解决方案,但我不确定它是否能为您解决任何问题。
JS代码
var myApp = angular.module(&#39; myApp&#39;,[]);
myApp.controller(&#39; notesController&#39;,函数notesController($ scope,$ http){
$scope.myData = [{ name: "Moroni", age: 50, result: "Sodium" },
{ name: "Naomi", age: 50, result: "Sodium" },
{ name: "Rambo", age: 50, result: "Sodium" }
];
$scope.changename = function (h) {
h.name = "Simon";
h.age = "34";
h.result = "This is a test";
};
})
.directive("kid", function () {
return {
restrict: "E",
scope:{
myData:"=simon",
changed:"&change"
},
template: '<input type="text" ng-model="myData.name"/><span>'
+'{{myData.name}}</span><label '
+'ng-click="changed({\'data\':myData});">'
+'Change Name</label><br/>'
};
});
HTML
<div ng-app="myApp" >
<div ng-controller="notesController" >
<kid ng-repeat="data in myData" simon="data" change="changename(data)">
</kid>
</div>
</div>