Angular — как изменить ng-model через контроллер?

Question

[Виталий Семьянчук]

Добрый день.

Есть приложения написано на ангулар, в нем два поля input type="range" и input type="number" нужно чтобы когда нажимаешь на input type="number" изменялось слайдер ( input type="range" ). Решил эту проблему так

<div ng-app ng-controller="Ctrl">
    Range: <input type="range" ng-model="i" min="0" max="5" step=".5" /><br />
           <br />
    Number: <input type="number" ng-model="i" min="0" max="5" /><br />
    <br />
    i: {{i}}
</div>

Пример вот jsfiddle.net/VFyFv
Ну у меня усложнилась задача, я использую canvas библиотеку fabricjs, и мне нужно когда изменяеться размер обьекта изменять слайдер ( input type="range" ) и из-за этого я не могу использовать пример выше, потому что не могу на обьект повесить ng-model="i".

Поэтому вопрос, могу ли я изменять слайдер, не используя ng-model, например, как-то так

function Ctrl($scope) {
    $("input[type=number]").change(function(){
        $scope.i = $("input[type=number]").val();
    })    
}

Но этот код к сожалению не работает.

Answer 1

[sasha]

ангуляр такая падла что он не знает ни о каких асинхронных вызовах чего либо если эти вызовы не сделал он сам.

$("input[type=number]").change(function(){
        $scope.i = $("input[type=number]").val();
    })

этот код делает асинхронный вызов jquery. и когда он его делает то ангуляр не знает что скоп был изменен. попробуйте что то вроде этого

<input ng-change="someShitChange()">
$scope.someShitChange = function(){...}

Comments

[Виталий Семьянчук]

ng-change не могу исльзовать потому что, мне нужно будет вешать на изменения обьекта в fabricjs и там некуда впихнуть ng-change. Может еще как то можно?

[Сергей Протько]

@madmages, вы точно уверены что знаете что такое "асинхронные вызовы"?

Дайте лучше человеку ссылку почитать о том как data-binding работает. Вообще прежде чем работать хоть с каким либо фреймворком следует хотя бы пару дней потратить на "поразбираться".

[sasha]

@Fesor у меня подозрение что я ниче не знаю :(

[sasha]

@fix20152 как вариант можно создать сервис , в котором будет метод, котоырй будет возвращать promise и выглядет будет примерно так

$("input[type=number]").change(function(){
someNewService.doSomeShit().then(function(){
$scope.i = $("input[type=number]").val();
})
})

[Сергей Протько]

@madmages, не принижайтесь, вы просто троль)

[Виталий Семьянчук]

@madmages вот это то что я искал, спасибо вам.

Answer 2

[Сергей Протько]

Скажите, зачем вам AngularJS? Или проект достался в наследство?

jsfiddle.net/GxqfK/1

Контроллер связывается с вьюшками через $scope, это по сути уровень абстракции такой. Модели и контроллеры ничего не знают о том как у вас формируется представление, они просто предоставляют данные. А вот директивы интереснее - они могут работать с DOM и инкапсулировать в себе какую-то логику. Например в моем примере, для инпута range берется значение и конвертируется в число (не понятно почему этого нету из коробки... ну да не суть).

Подробнее можете найти в документации. Советую простись мо поему примеру и осознать все что там происходит.