How can I send an object back from a directive into the parent controller?
I've defined the following directive:
app.directive('inspectorSharedObjects', function () {
return {
restrict: 'E',
scope: {
filterText: '=filter',
type: '=',
selectObject: '&onSelect'
},
controller: function ($scope) {
$scope.dot = function (tags) {
return "label-dot-" + tags[0];
}
},
link: function (scope, element, attrs) {
},
templateUrl: 'partials/InspectorSharedObjectListPartial.html'
};
});
... which I call in the following way:
<inspector-shared-objects ng-repeat="group in modelSharedObjects" type="group" filter="filterText" on-select="selectObject(obj)"></inspector-shared-objects>
... with the following template:
<div class="object-group-header" ng-click="isActive = !isActive" ng-class="{active : isActive}">
<span>{{ type.name }}</span>
<span ng-if="filterText">({{ filteredList.length }})</span>
<i class="fa fa-plus-circle"></i>
</div>
<div class="object-group-list" ng-show="isActive">
<ul>
<li ng-repeat="obj in filteredList = (type.contents | filter:filterText | orderBy:'name')" ng-class="dot(obj.tags)" ng-click="selectObject(obj)">{{ obj.name }}</li>
</ul>
</div>
An ng-click on the li within a list should send the selected obj back the parent controller. The above code calls that parent controller's function, but the object I'm trying to pass comes in as undefined.
I read through the following question: calling method of parent controller from a directive in AngularJS - which I think is trying to do the same thing, but I can't see what I'm doing different than the answer (or my interpretation of it).
How can I the obj coming from the directive's template passed back up to the parent controller?
UPDATE: Here is a JSFiddle: http://jsfiddle.net/EvilClosetMonkey/7GMEG/
When you click on the bulleted values the console should spit out the object.
