将Angularjs动态绑定到新创建的html元素

前端之家收集整理的这篇文章主要介绍了将Angularjs动态绑定到新创建的html元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个标签页,其中有多个选项卡,一旦点击了调用服务来返回一些数据。其中一些数据返回html表单,非常随机。我想收集输入的值,并通过服务将数据发送回服务器。我遇到的问题是我无法从我正在动态创建的html中的输入元素中获取数据。

我创建了一个Plunker显示问题。请注意,html值可以随时更改,因此html的硬编码将无法正常工作。这里是来自plunker的代码,但请查看plunker,以了解发生的情况。

app.js

var app = angular.module('plunker',[]);

app.controller('MainCtrl',function($scope,$sce,$compile) {
    $scope.name = 'World';
    $scope.html = "";

    $scope.htmlElement = function(){
        var html = "<input type='text' ng-model='html'></input>";
        return $sce.trustAsHtml(html);
    }

});

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <Meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <div ng-bind-html="htmlElement()"></div>

    {{html}}

  </body>

</html>
@H_301_12@
一个解决方案是使用ngInclude与$ templateCache,如本 Plunker所示。

有几件事要注意。

首先,您可以使用服务获取模板,并将其添加到$ templateCache,如所描述的here(复制示例):

myApp.service('myTemplateService',['$http','$templateCache',function ($http,$templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template',result);
  });
}]);

然后,您可以将其包含在您的模板中,如下所示:

<div ng-include="'my-dynamic-template'"></div>

ngInclude将允许html字符串上的数据绑定,因此您不需要ngBindHtml。

第二个是,因为ngInclude创建一个新的范围,所以访问新创建的范围之外的html属性将无法正常工作,除非您通过父范围上的对象(例如ng-model =“data.html”)访问它ng-model =“html”。请注意,父范围中的$ scope.data = {}是在这种情况下使html可以在ngInclude范围之外访问的。

(有关为什么您应该始终在ngModels中使用点的更多信息,请参阅this answer)。

编辑

正如您所指出的,当使用服务返回HTML时,ngInclude选项不太有用。

这是编辑的plunker与使用$编译的基于指令的解决方案,如David的评论

相关补充:

app.directive('customHtml',function($compile,$http){
  return {
    link: function(scope,element,attrs) {
      $http.get('template.html').then(function (result) {
        element.replaceWith($compile(result.data)(scope));
      });
    }
  }
})
原文链接:https://www.f2er.com/angularjs/144435.html

猜你在找的Angularjs相关文章