Я изучаю Angular JS, и я застрял на довольно базовом шаге.
Вот мой тестовый код:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery.min.js"></script>
<script src="/angular.min.js"></script>
<script>
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
};
</script>
</head>
<body>
<div data-ng-app="">
<div>
<input type=text id=test_model />
</div>
<div>
<p id=test_bind></p>
</div>
<button onclick=enable()>Enable</button>
</div>
</body>
</html>
Здесь я ожидаю, что когда нажата кнопка " Включить", она должна активировать привязку, поэтому, если что-то набирается на вход #test_model
, оно должно обновить абзац #test_bind
. Но это не работает.
Я могу видеть с Firebug, что атрибуты (data-ng-model
и data-ng-bind
) обновляются при нажатии кнопки Enable, но она не действует, как если бы она была статически кодирована (жестко кодирование модель и параметры привязки).
Если я коды статический, то я заметил, что 3 новых классы (ng-pristine
, ng-untouched
и ng-valid
) автоматически добавляются в #test_model
и один новый класс (ng-binding
) добавляют к #test_bind
. Поэтому я изменил enable()
на это:
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
$("#test_model").addClass("ng-pristine");
$("#test_model").addClass("ng-untouched");
$("#test_model").addClass("ng-valid");
$("#test_bind").addClass("ng-binding");
};
Но все равно, не работает.
Что мне не хватает?
Если вы хотите динамически добавлять угловые директивы, такие как ng-model, ng-bind и т.д., Вы должны создать свою собственную директиву и использовать компиляцию $.
Вы можете использовать угловой ng-show или ng-switch для переключения элементов DOM без привязок и элементов с ng-моделью и другими атрибутами, которые вам нужны.