如果模型和绑定由 jQuery 设置，AngularJS 模型绑定不起作用答案

【问题标题】：AngularJS model-bind not working if the model and bind are set by jQuery如果模型和绑定由 jQuery 设置，AngularJS 模型绑定不起作用
【发布时间】：2015-09-20 06:42:48
【问题描述】：

我正在学习 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>

在这里，我期望发生的是，当单击 Enable 按钮时，它应该启用绑定，因此如果在 #test_model 输入中键入任何内容，它应该更新 @987654323 @ 段落。但它不起作用。

我可以通过 Firebug 看到，当单击启用按钮时，属性（data-ng-model 和 data-ng-bind）正在更新，但它不会像静态的那样生效coded（硬编码模型和绑定参数）。

如果我对它进行静态编码，那么我注意到 3 个新类（ng-pristine、ng-untouched 和 ng-valid）自动添加到 #test_model，并且一个新类（ng-binding）被添加到 @987654331 @。所以我将我的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");
};

但还是不行。

我错过了什么？

【问题讨论】：

不要像这样混合使用 Angular 和 jQuery。您需要查看$compile 服务。
哦！你能告诉我如果混合的话会在哪里搞砸吗？
jQuery 和 Angular 的工作方式非常不同，完全放弃 jQuery 否则你会遇到很多类似的问题
问题是，我已经有了一个完整的 jQuery 应用程序。我想向它添加一个新的 Angular 功能。无论如何，谢谢你的建议。我想我需要找到一个仅限 Angular 的解决方案:)

标签： javascript jquery html angularjs dynamic

【解决方案1】：

如果您想动态添加 Angular 指令，如 ng-model、ng-bind 等。您必须创建自己的指令并使用$compile。

您可以使用 Angular ng-show 或 ng-switch 来切换显示没有绑定的 DOM 元素以及具有 ng-model 和您需要的其他属性的元素。

【讨论】：