UPDATE: It seems that setting the controller in the view like
ng-controller="SomethingController as Ctrl"ng-model="Ctrl.myModel" actually works. How surprising!
I have been wanting to integrate this particular directive into my application. All I need to do is add my model as an attribute of the element with ng-model="myModel", and it should function correctly. I've seen it work in examples and even made it work on jsfiddle.
However, for some reason, it just won't work in my app. I've installed it through bower, included all the necessary files in my index.html, and injected it using
angular.module('myApp', ['angular-input-stars'])The issue now is that the model only seems to work one way in my application. The ng-model="myModel" displays the correct number of stars based on the value of `myModel`, but when I change the stars (within the directive), that new value is not being sent back to my model.
I've looked at the code of the directive, and they are indeed using the model controller to set the value:
function link(scope, element, attrs, ngModelCtrl) {
//...
scope.setValue = function (index, e) {
//...
ngModelCtrl.$setViewValue(scope.last_value);
}
}
Even though the directive does not explicitly include scope: {ngModel: '='} in the return statement, this still works in examples and jsFiddle. However, I'm still unsure about the $setViewValue method, even after researching it further.
I suspect it may be related to the architecture of my application, although I can't be certain. The app is very well-structured and complex, and unfortunately, I cannot share the code due to company policies. However, I can explain how we have structured it:
|-- app.js (contains directive module, shown below)
|-- index.html
|-- /modules
|-- /something
|-- /overview
|-- somethingController.js
(included in index.html & loaded through directive)
|-- somethingDirective.js
(included in index.html & loaded through app.js module)
|-- somethingView.html
(loaded through directive)
app.js code:
var app = angular.module('myApp', [
'angular-input-stars',
'something.overview'
]);
somethingDirective.js:
var somethingOverview = angular.module('something.overview');
somethingOverview.directive('somethingOverviewDirective', function () {
return {
restrict: 'E',
controller: 'SomethingOverviewController',
templateUrl: 'modules/something/overview/somethingOverviewView.html',
scope: {
overview: '=overview',
errors: '=errors'
}
};
});
somethingController.js:
var somethingOverview = angular.module('something.overview', []);
somethingOverview.controller('SomethingOverviewController',
['$scope', function ($scope) {
function init() {
$scope.myModel = 5;
}
// ...
init();
}]);
somethingView.html:
<div>
Rating: {{myModel}}
<input-stars max="5" ng-model="myModel"></input-stars>
</div>