Been playing round with Angular directives and came to an issue which I've stumbled upon... Following is the code:
<!DOCTYPE html>
<html>
<head>
<title>Directive test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('mainCTRL', function($scope) {});
app.directive('listItems', function() {
return {
restrict : 'E',
transclude : true,
scope : {
items : '='
},
controller : function($scope) {
/**
* @param item item being inserted
*/
$scope.addQuestion = function() {
//Define the item list (if undefined)
if(!$scope.listOfItems) $scope.listOfItems = [];
//add the item
$scope.listOfItems.push({
question : $scope.question
});
console.log($scope.listOfItems);
};
},
template : '<div>Question: <input type="text" ng-model="question" />' +
'<button ng-click="addQuestion()">Add question</button>' +
'<div><ng-transclude></ng-transclude></div>' +
'</div>'
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="mainCTRL">
<list-items items="listOfItems">
<div ng-repeat="item in listOfItems track by $index">
{{item.question}}
</div>
</list-items>
</body>
</html>
Objects are successfully pushed to the array, but why on earth they do not repeat?
<list-items items="listOfItems">
<div ng-repeat="item in listOfItems track by $index">
{{item.question}}
</div>
</list-items>
Thanks for any assistance.
With:
scope: {
items : '='
}
you specifiy the name of the scope variable to be items. Yet you use listOfItems in the directives controller. Change that to items and it will work.
(function (app, ng) {
'use strict';
app.controller('mainCTRL', function($scope) {});
app.directive('listItems', function() {
return {
restrict : 'E',
transclude : true,
scope : {
items : '='
},
controller : function($scope) {
/**
* @param item item being inserted
*/
$scope.addQuestion = function() {
//Define the item list (if undefined)
if(!$scope.items) $scope.items = [];
//add the item
$scope.items.push({
question : $scope.question
});
console.log($scope.items);
};
},
template : '<div>Question: <input type="text" ng-model="question" />' +
'<button ng-click="addQuestion()">Add question</button>' +
'<div><ng-transclude></ng-transclude></div>' +
'</div>'
};
});
}(angular.module('app', []), angular));<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCTRL">
<list-items items="listOfItems">
<div ng-repeat="item in listOfItems track by $index">
{{item.question}}
</div>
</list-items>
</div>