Привязка модели AngularJS не работает, если модель и привязка установлены jQuery

Question

Привязка модели AngularJS не работает, если модель и привязка установлены jQuery

0

Я изучаю Angular JS, и я застрял на довольно базовом шаге.

Вот мой тестовый код:

<!DOCTYPE html>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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");
};

Но все равно, не работает.

Что мне не хватает?

CluelessNoob 02 июль 2015, в 18:24

Источник

Теги:

javascript

jquery

html

angularjs

dynamic

1 ответ

Ещё вопросы

Mitra · Accepted Answer · 2015-07-02T13-50-00.000Z

Если вы хотите динамически добавлять угловые директивы, такие как ng-model, ng-bind и т.д., Вы должны создать свою собственную директиву и использовать компиляцию $.

Вы можете использовать угловой ng-show или ng-switch для переключения элементов DOM без привязок и элементов с ng-моделью и другими атрибутами, которые вам нужны.