将和.html(墙帖）加载到不同的页面(这样我就可以在所有想要添加的页面中都有墙帖），使用angular

Load and .html (wall posts) to different pages (so I can have wall posts in all the pages i want to add them) ,using angular

本文关键字：添加 使用 angular 加载 墙帖 html 就可以 将和      更新时间：2023-09-26

我昨天刚开始使用angular，我想在一个单独的文件中创建一个具有一些行为的.html，并将其添加到其他文件中。例如，我希望在一个.html中有墙帖，并且我希望能够将墙帖添加到我想要的特定标签中的任何页面。我用了一点jquery。。所以我所做的是（但摘要似乎不起作用）：

这是我想添加的html（我单独测试它，它可以工作）：

<div ng-app="" ng-controller="customersController"> 
<ul>
  <li ng-repeat="x in names">
     <b> {{ x.texto }}</b> {{x.id }}
  </li>
</ul>
<input type="text" ng-model="tbPost">
<button ng-click="publicarPost()">Click Me!</button>
</div>
<script>

function customersController($scope,$http) {
     $http.post(urlSitio + url , {id_partido : 1}).
        success(
           function(data, status, headers, config) {
           $scope.names = data.consulta;
           $scope.$digest();
        }).
        error(errorCallback);
}

</script>

这就是我将它添加到其他页面中的标签的方式

// the function that load the .html
function cargarControl(url,tag){
   $.get(urlControl+url, {},
        function(content) {
            $("#"+tag).append(content);
        }, 'html');
}
// calling that function
cargarControl("wallPartido", "divPosts");
angular.element('customersController').scope().$digest();

但它不起作用，页面显示｛｛x.texto｝｝｛{x.id}｝而不是帖子。。。我还尝试了$digest（）；但也不起作用。我怎样才能让它工作？如果不能这样做，还有其他的吗？（实际上我想要一个没有jquery的）

编辑：我想要实现的是拥有一个具有某些行为的html文件（如.net中的控件），并能够将其嵌入到我想要的任何其他页面中的特定标记中。例如，如果我有一个包含所有墙帖的页面，我希望能够轻松地将其嵌入到其他页面的某个标签中。假设您构建了一个javascript计算器，不希望粘贴代码，但希望调用包含它的.html将其添加到其他页面中。

考虑以下示例：http://jsbin.com/xehovigabule/1/watch?html，js，输出

我创建了一个自定义指令，您可以将其添加到任何页面。

angular.module('myApp', [])
  .controller('customersController', customersController);
function customersController($scope,$http) {
  $scope.wallposts = [{
    texto: "Lorem ipsum"
  },{
    texto: "Dolor sit maet"
  }, {
    texto: "Lorem sorem"
  }];
 $http.post("http://get.data")
 .success(function(data) {
       $scope.names = data.consulta;
 })
 .error(function() {
   //err
 });
}
angular.module("myApp")
    .directive("wallPosts", wallPosts);
function wallPosts() {
    return {
        restrict: 'E',
    templateUrl: "path/to/partial.html",
    scope: {
        posts: '='
    }
};
}
相关文章：