Вы можете передать данные модели пункт так:
<div ng-init="instance = item" ng-controller="ItemController">
</div>
«instance» будет ссылкой на элемент модели данных массива списка i n "ListController".
И вы могли бы получить доступ к его свойству в вашей замыканию функции ItemController:
.controller("ItemController", function($scope){
$scope.instance={};
$scope.doSomething = function(){
console.log($scope.instance.name);
}
$scope.$watch('instance',function(){
console.log("iitem changed");
},true);
});
Я не совсем уверен, что функция вы хотите достичь в своей реализации «Выбор».
Я думаю, что вы хотите реализовать выбранный список, и элемент списка будет добавлен к нему, когда пользователь щелкнет элемент списка. Вы можете попытаться создать модель «выбранного списка» для управления выбранным представлением списка, если вы хотите добавить выбранный элемент в список.
ListController.JS
.controller("ListController", function($scope){
$scope.selectedList = [];
$scope.addItem = function(item){
$scope.selectedList.push(item);
}
});
HTML
<div ng-repeat="selected in selectedList">
<div ng-init="instance = selected" ng-controller="ItemController">
<span>{{instance.name}}</span>
<button ng-click="doSomething()">selectedAction</button>
</div>
</div>
Я написал простой мульти выбранный пример списка следующим образом:
HTML
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Nested controller</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="js/nestedController.js"></script>
</head>
<body>
<div ng-controller="parentCtrl">
<h2>List</h2>
<div ng-repeat="item in list">
<input type="checkbox" ng-model="item.selected" ng-checked="item.selected"/>
<div ng-init="instance = item" ng-controller="childCtrl">
<span>{{instance.name}}</span>
<button ng-click="doSomething()">doSomething</button>
</div>
</div>
<h2>Selected</h2>
<div ng-repeat="selected in selectedList">
<div ng-init="instance = selected" ng-controller="childCtrl">
<span>{{instance.name}}</span>
<button ng-click="selectedAction()">selectedAction</button>
</div>
</div>
</div>
JS
angular.module("myApp",[])
.controller("parentCtrl",function($scope){
//test data
$scope.list = [{name:'item1',age:'12',selected:false},{name:'item2',age:'18',selected:false}];
//use model to control selected list view
$scope.selectedList = [];
//refresh the selected list model when the list checked stauts has been updated
$scope.$watch('list',function(){
console.log("parent controller detected change");
$scope.selectedList = [];
$scope.list.forEach(function(elem,index,array){
if(elem.selected===true){
$scope.selectedList.push(elem);
}
});
},true);
})
.controller("childCtrl",function($scope){
$scope.instance={}
$scope.doSomething = function(){
alert("I'm the item: "+$scope.instance.name);
}
$scope.selectedAction = function(){
alert("I'm the selected item: "+$scope.instance.name);
}
//could register a watcher to monitor the model status
$scope.$watch('instance',function(){
console.log("child controller detected change");
},true);
});
Вот jsFiddle demo
Надеется, что это полезно.
Это отличная идея. Благодарю. Я смущаюсь использовать ngInit из-за этой строки в документах angularjs: «Единственное подходящее использование ngInit для сглаживания специальных свойств ngRepeat, как видно из демонстрации ниже. Кроме этого случая, вы должны использовать контроллеры, а не ngInit, чтобы инициализировать значения на область действия. " Где они использовали его для вложенных ngRepeats: 'ng-repeat =" innerList в списке "ng-init =" outerIndex = $ index "'. Хотя они не объясняют, почему они делают этот комментарий. – nicholas