I currently have a directive that I’ve defined as:
.directive("carSelect", [function () {
return {
templateUrl:
"/inc/partials/directives/template-car-select.html",
restrict: "E",
require: "ngModel",
scope: {
outputModel: "=ngModel"
},
controller: "CarsController"
};
}])
The purpose of this directive is to allow a user to select various cars which eventually get saved as part of their profile.
I call this directive in template-user-setup.html
by:
<car-select ng-model="user.type.car.carIds"></car-select>
Where user.type.car.carIds
is a variable found in the controller of another directive that uses template-user-setup.html
as its template.
I then have a multiselect directive in template-car-select.html
which is called by:
<multiselect ng-model="CarIds"></multiselect>
Where CarIds
is a variable found in the CarsController
and this directive allows a user to select multiple cars from a list.
Now my question is how can I make sure that the outputModel
variable in the carSelect directive is updated with the value of CarIds
?
The only way I thought of making this work is by adding a callback to the multiselect directive so that in the CarsController
I assign CarIds
to the outputModel
variable which looks something like this:
<multiselect ng-model="CarIds" on-change-callback="assignCardIdsValueToOutputModel()"></multiselect>
Where assignCardIdsValueToOutputModel
is a function in the CarsController
that looks like:
$scope.assignCardIdsValueToOutputModel= function () { $scope.outputModel = $scope.CarIds};
However, even though this works I feel like I’m not utilizing bindings correctly. Is there a better way to do this without adding a callback and just using bindings?