I am currently developing a directive that has the ability to display a series of controls.
Each individual control is implemented as a directive named fsFilter. In the controller managing the parent element, I establish a binding between the filters array and an array in the parent scope.
Initially, this process works smoothly and upon the first compilation of the directive, it renders the child directives successfully.
However, when I introduce a new object into the filters array within the parent scope, I can observe through $watch that the connected array within the child scope has been modified. Yet, the alteration in the property does not trigger a recompilation. Despite attempting to utilize $apply and implementing an addFilter method within the directive's scope - even resorting to somewhat unconventional measures like invoking element.scope() directly - the array gets updated but the recomposition remains elusive. Even executing $apply following the addition of a new object to the array proves ineffective.
Below is my directive:
.directive('fsFilterCollection', function ($compile, $timeout) {
return {
restrict: 'AE',
priority: 1002,
scope: {
filters: "="
},
controller: function ($scope, $element, testFactory) {
$scope.filterIndex = 0;
$scope.filterClosedFn = function ($event, filterdata) {
$event.stopPropagation();
$scope.filters = $scope.filters.filter(function (el) { return el.name != filterdata });
console.log("filter closed" + testFactory.sayHello());
}
if ($scope.filters) {
angular.forEach($scope.filters, function (el) { el.index = $scope.filterIndex++; });
}
$scope.addFilter = function () {
if (arguments.length == 1 && angular.isObject(arguments[0])) {
$scope.filters.push(arguments[0]);
}
else {
$scope.filters.push({ filterType: "String" });
}
}
},
template: function (element, attr) {
return '<div>'+
' <div ng-repeat="filter in filters">'+
' <div>',
' <div fs-filter keepopen="true" filter-closed-fn="filterClosedFn" isopen="isopen" keepopen="true" filterdata="filter.filterdata" fs-filter actions="true" filter-type="String"></div>' +
' </div>'+
' </div>'+
'</div>'
},
link: function ($scope, element, attrs, ngModelController) {
$scope.$watch('filters', function () {
// reindex
$scope.filterIndex = 0;
angular.forEach($scope.filters, function (el) { el.index = $scope.filterIndex++; });
},true);
}
}
})
This snippet showcases my parent controller:
var myAppModule = angular.module('development-beta', ['ui.select', 'ui.bootstrap','firespace.filtercontrol','ngSanitize']);
myAppModule.controller('fs-controller', ['$scope', function ($scope) {
$scope.filters = [
{ filterType:"String" }
];
$scope.addFilter = function () {
$("#myfilters *[fs-filter]").scope().addFilter();
}
}]);
Furthermore, I would greatly appreciate any insights on whether updating the bound array in the parent scope represents the correct approach for this task. I have considered utilizing a factory, but due to its singleton nature, I am uncertain how to manage each directive's scope without passing the $scope into every call?
Thank you for any guidance provided.