I have a directive called add-tags that I intend to use in various areas of the application. It is used to add tags to an array and then save them from the main controller. The user can edit the list when previewing on a different view or controller (modal). On the main page, I include:
<add-tags tags="tags"></add-tags>
Here is how my directive is set up:
'use strict';
angular.module('theApp')
.directive('addTags', function() {
return {
templateUrl: 'components/add-tags/add-tags.html',
//restrict: 'EA',
scope: {
tags:'='
},
link: function($scope, $element, attrs) {
} //link
};
});
How can I access previous tag data from the edit controller? When I use,
<add-tags tags="workDetails.tags"></add-tags>
The entire data disappears from the scope, but if I do this instead:
<span ng-repeat="x in workDetails.tags">
<h1>{{x.name}}</h1>
</span>
I am able to see the list of tags. Any assistance would be greatly appreciated :)
Below is an example of the add-tags.html file:
<div ng-repeat="tag in tags" class="text-center new-item">
<div class="input-group">
<input type="text" name="" class="form-control" ng-model="tag.name">
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="deleteTag($index)">
Delete
</button>
</span> <!-- /.input-group-btn -->
</div> <!-- /.input-group -->
</div>
<div class="form-group" ng-hide="tags.length == tags_max">
<input type="text" class="form-control" placeholder="Enter tag:" ng-model="tag">
</div>
<!-- /.form-group -->
<button
type="button"
class="btn btn-primary center-block"
ng-disabled="tags.length == tags_max"
ng-class="{ 'btn-danger': tags.length == tags_max}"
ng-click="addTag()">
Add tag
</button>
<hr>