Таким образом, я начинаю работать с angularjs и firebase, и я пытаюсь разработать приложение, которое добавляет значения (числовые) на вкладке. Пока у меня это:
app.js:
var app = angular.module("app", ['firebase']);
app.directive('addOne', function() {
return {
link: function(scope,element) {
element.bind('click', function() {
console.log(element.parent().find('input'))
element.parent().find('input')[1].value++;
});
}
}
});
и мое мнение:
<section class="form-group">
<label for="">$</label> <input type="button" value="+" add-one>
<input ng-model="user.level" type="text" class="form-control" />
</section>
и мой контроллер:
app.controller('mController', ['$scope', 'User',
function($scope, backHome, User, adicionar){
$scope.user = User(1);
User(1).$bindTo($scope, "user");
}
]);
дело в том, что после того, как я нажму кнопку с директивой add-one, значение ввода изменится, но $ bindTo не работает...
Итак, почему bindTo не работает, когда я вношу изменения непосредственно в DOM?
AngularJS не обращает внимания на то, что значение ввода задано, оно только заботится о том, что в ng-модели. Попробуй это...
app.directive('addOne', function() {
return {
link: function(scope,element) {
element.on('click', function() {
scope.$apply(function(){
scope.user.level++
});
});
}
}
});
Как указано в @PankajParkar, вам также необходимо использовать scope. $ Apply, когда вы хотите обновить привязку с события.
angular.module('demo', [])
.controller('DemoController', function($scope){
$scope.user={level: 1};
})
.directive('addOne', function() {
return {
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(scope.user.level++);
});
}
}
})
.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "=",
txt: '@buttonText'
},
template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
link: function(scope, element, attrs) {
if(angular.isDefined(attrs.initialVal)) {
scope.model = attrs.initialVal;
}
element.on('click', function() {
if (attrs.direction === 'decrement') {
scope.$apply(scope.model--);
} else {
scope.$apply(scope.model++);
}
});
}
};
});
<script src="/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
<input type="text" ng-model="user.level">
<input type="button" value="+" add-one>
<hr>
<unary-input button-text="Add one" model="user.level" direction="increment"></unary-input>
<unary-input button-text="-" model="user.level" direction="decrement"></unary-input>
<hr>
<unary-input button-text="-" model="user.val" direction="decrement" initial-val="10"></unary-input>
</div>
В AngularJS вы хотите изменить представление, изменив модель, на которой она основана, и сделайте это как можно скорее, используя традиционный подход jQuery (перемещая DOM и увеличивая значение).
ОБНОВИТЬ
Хорошо, так что здесь хорошая многоразовая версия (пожалуйста, просмотрите фрагмент, чтобы увидеть его в действии).
Шаблон включает в себя как кнопку, так и вход. Он принимает 4 значения, которые вы устанавливаете как атрибуты:
Итак, вы бы использовали его так:
<unary-input button-text="Subtract One" model="user.val" direction="decrement" initial-val="10"></unary-input>
И сама директива выглядит так:
.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "=",
txt: '@buttonText'
},
template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
link: function(scope, element, attrs) {
if(angular.isDefined(attrs.initialVal)) {
scope.model = attrs.initialVal;
}
element.on('click', function() {
if (attrs.direction === 'decrement') {
scope.$apply(scope.model--);
} else {
scope.$apply(scope.model++);
}
});
}
};
});
Просмотр вокруг я мог найти решение, сделанное так, как вы сказали в комментариях (две кнопки с одним приращением и еще один декремент), спасибо за помощь! и здесь финальная версия.
app.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "="
},
template: '<input type="text" ng-model="model" /><button ng-click="decrement()">-</button><button ng-click="increment()">+</button>',
link: function(scope, element) {
scope.increment = function() {
scope.model++;
}
scope.decrement = function() {
scope.model--;
}
}
};
});
$scope.$apply()
при обновлении привязки из события.