javascript - 加载和.html(墙贴)到不同的页面(这样我就可以在我想要添加它们的所有页面中添加墙贴)，使用 Angular

Question

我昨天开始使用 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 以将其添加到其他页面中。

Answer 1

考虑以下示例:http://jsbin.com/xehovigabule/1/watch?html,js,output

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

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: '='
    }
};
}