AngularJS如何动态添加HTML并绑定到控制器

19 浏览
0 Comments

AngularJS如何动态添加HTML并绑定到控制器

我刚开始使用AngularJS，困惑于如何设计适合我所需的正确架构。我有一个单页应用，但URL应该始终保持不变，我不希望用户能够访问根目录之外的任何路由。在我的应用中，有一个主要的div需要承载不同的视图。当访问新视图时，我希望它能够接管主要div的显示。以这种方式加载的视图可以是即时丢弃的，也可以隐藏在DOM中保存下来 - 我对每种方式如何工作感兴趣。

我已经大致实现了我想要做的事情的一个工作示例。在此Plunk中查看工作示例。基本上，我想要动态加载HTML到DOM中，并使标准的AngularJS控制器能够连接到这个新的HTML。是否有一种比我这里使用的自定义指令和使用$compile()连接到Angular更好/更简单的方法？也许有一些类似于路由器的东西，但不需要更改URL来运行？

这是我目前使用的特殊指令（从另一个SO帖子中获取）：

// Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
myApp.directive('dynamic', function ($compile) {
  return {
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        if (!html) {
            return;
        }
        ele.html((typeof(html) === 'string') ? html : html.data);
        $compile(ele.contents())(scope);
      });
    }
  };
});

谢谢，

Andy

0

3 答案

0 Comments

AngularJS如何动态添加HTML并绑定到控制器

对于那些像我一样没有使用Angular指令并且"被困"在Angular范围之外的人来说，下面的内容或许能帮到你。在经过长时间在网上和Angular文档中搜索之后，我创建了一个类来编译HTML，将其放置在目标元素中，并将其绑定到一个作用域上（如果该元素没有作用域，则使用$rootScope）。

/**
 * AngularHelper : 包含一些在不在Angular控制器或指令的作用域中使用Angular时有用的方法
 */
var AngularHelper = (function () {
    var AngularHelper = function () { };
    /**
     * ApplicationName : 默认的应用程序名称
     */
    var defaultApplicationName = "myApplicationName";
    /**
     * Compile : 用应用程序的rootScope编译HTML，并将编译后的HTML替换目标元素的内容
     * @$targetDom : 用于放置编译后的HTML的DOM
     * @$htmlToCompile : 需要使用Angular编译的HTML
     * @$applicationName : 应用程序名称（如果为空则使用默认名称）
     */
    AngularHelper.Compile = function ($targetDom, $htmlToCompile, $applicationName) {
        var $injector = angular.injector(["ng", $applicationName || defaultApplicationName]);
        $injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
            // 获取目标元素的作用域，如果不存在则使用rootScope
            var $scope = $targetDom.html($htmlToCompile).scope();
            $compile($targetDom)($scope || $rootScope);
            $rootScope.$digest();
        }]);
    }
    return AngularHelper;
})();

我已经涵盖了我所有的情况，但如果你发现我应该添加什么内容，请随时评论或编辑。希望能对你有所帮助。

如果页面是动态加载的，那么目标元素是什么？

然后等待$targetDom加载完成，然后再调用AngularHelper.Compile方法，传入要插入HTML的DOM和要插入的HTML。

如果我给一个"已加载"的DOM的id，我会遇到错误："Uncaught TypeError: $(...).html(...).scope is not a function"。

你需要将一个jQuery元素传递给Compile方法，如AngularHelper.Compile($("body"), "<div>toto</div>")。此外，你的应用程序中是否正确加载了Angular？

这实际上是我想要解决的问题 🙂 我应该每次加载Angular才能让我的动态加载HTML页面与之一起工作。

我明白了。但是Angular应该只在你的应用程序的生命周期中加载一次。首先，你需要包含angular.min.js，然后如果你获取到动态HTML而不使用ng-include或ng-view指令，你可以使用上面的类来编译它。当你在解决方案中包含angular.min.js时，使用jQuery方法选择的每个DOM元素都应该可以访问scope函数。

我们可以在聊天中继续讨论。

在我的情况下，我有一个在Angular应用程序中使用的jQuery插件。我的插件可以将HTML拖放到我的Angular页面中，我想将该HTML与我的Angular代码绑定。你的类对这种情况有帮助吗？

如果你仍在使用Angular 1.x，那么是的，我想它可以帮助。我写这个答案是在3年前，所以我强烈建议你升级你的项目从AngularJS到Angular（5），并尽可能使用更标准的方法。

0
0 Comments

AngularJS如何动态添加HTML并绑定到控制器？

在这个问题中，我们可以使用内置的ngInclude指令来实现。在下面的示例中，您甚至不需要编写任何JavaScript代码。模板可以轻松地存在于远程URL中。

这是一个可工作的示例：http://plnkr.co/edit/5ImqWj65YllaCYD5kX5E?p=preview

通过下拉菜单选择页面内容模板



通过按钮点击设置页面内容模板

这是一个非常有用的功能，非常感谢！我需要花些时间学习Angular的内置功能！

请查看关于这个主题的官方视频 - campus.codeschool.com/courses/shaping-up-with-angular-js/level/...

0
0 Comments

AngularJS如何动态添加HTML并绑定到控制器

在AngularJS中，有一种方法可以动态添加HTML并绑定到控制器。下面是解决这个问题的原因和解决方法。

首先，创建一个名为sample.html的文件。然后，在该文件中创建一个带有id为"loadhtml"的div标签。代码如下：

<div id="loadhtml"></div>

接下来，在任何控制器中，通过以下代码加载HTML页面并将其内容与当前作用域绑定：

    var htmlcontent = $('#loadhtml');
    htmlcontent.load('/Pages/Common/contact.html')
    $compile(htmlcontent.contents())($scope);

需要注意的是，这个方法使用了jQuery库来加载HTML页面。如果想要使用AngularJS而不是jQuery来实现这个功能，可以考虑使用工厂函数。但是由于工厂函数无法访问$scope，可以通过在工厂函数中设置一个名为scope的变量，并在视图模型初始化时将$scope传递给工厂函数来解决这个问题。

下面是一个稍微复杂一些的解决方案。在工厂函数中，当需要时设置globalVariablesService.viewReset为true。然后，在控制器中，通过$watch监听viewReset变量的变化，一旦变化，就通过$http.get方法加载HTML页面并将其赋值给$scope.social_content。代码如下：

$scope.$watch(function () {
    return globalVariables.viewReset
}, function () {
    if (globalVariables.viewReset) {
        $http.get("/views/social_template.html")
            .success(function (data) {
                $scope.social_content = data;
            });
    }
});

此外，在视图中，使用指令"social"来显示HTML内容。通过监听attr.content的变化，一旦变化，就使用$parse将HTML内容解析为可显示的格式，并通过$compile编译该内容。代码如下：

.directive('social', function ($compile, $parse) {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            scope.$watch(attr.content, function () {
                element.html($parse(attr.content)(scope));
                $compile(element.contents())(scope);
            });
        }
    };
});

最后，可以参考这个链接（stackoverflow.com/questions/21370080/…）来了解更多关于解决类似问题的方法。

需要注意的是，为了确保$compile在load回调函数中调用，应该将调用$compile的代码放在load回调函数中。代码如下：

htmlcontent.load('/Pages/Common/contact.html', function(){
    $compile(htmlcontent.contents())($scope);
});

以上就是解决AngularJS如何动态添加HTML并绑定到控制器的方法。希望对你有所帮助！

0