ОБНОВЛЕНИЕ: По-видимому, устанавливая контроллер в представлении, такой ng-controller="SomethingController as Ctrl"
а затем его использование в модели ng-model="Ctrl.myModel"
работает. Что такое f ***?
Я имел в виду реализовать эту конкретную директиву в своем приложении. Это просто требует, чтобы я поместил свою модель в качестве атрибута элемента как ng-model="myModel"
и он должен работать. Я вижу примеры его работы, и я тоже работал над jsfiddle.
Однако он просто не хочет работать с моим приложением. Я установил через bower, я включил все файлы в свой index.html
и я также ввел его angular.module('myApp', ['angular-input-stars'])
.
Теперь проблема заключается в том, что модель работает только в моем приложении. ng-model="myModel"
использует значение myModel
и устанавливает правильное количество звезд, но как только я меняю звезды (в директиве и через нее), это значение не возвращается обратно в мою модель.
Я проверил код директивы, и они используют контроллер модели, установив значение:
function link(scope, element, attrs, ngModelCtrl) {
//...
scope.setValue = function (index, e) {
//...
ngModelCtrl.$setViewValue(scope.last_value);
}
}
И хотя директива не включает в себя return
этой scope: {ngModel: '='}
, это все еще работает на примерах и jsFiddle, хотя я действительно не понимаю $setViewValue
(даже после изучения этого).
Я думаю, что это может иметь какое-то отношение к моей архитектуре приложений, но я не уверен. Приложение очень надежное и хорошо структурированное, и я не могу отобразить его код (код компании), но могу сказать, как мы его структурировали:
|-- app.js (contains directive module, show bellow)
|-- 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)
Код приложения:
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>
Как упоминалось в комментариях @charlietfl, первостепенное значение в области видимости - это проблема
Код без контроллераА:
<div ng-app="myApp">
<h3>Greetings</h3>
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div>Rating: {{rating}}</div>
<input-stars ng-model="rating.value" max="5"></input-stars>
</div>
</div>
app.controller("MyCtrl", ['$scope', function($scope) {
$scope.rating = {
value: 5
};
$scope.name = 'Superhero';
}]);
Обновлен jsFiddle: