Question

我添加DOM元素（在Angular外部），$编译它并将其与指令的事件处理程序中的范围链接 - 在新元素的ng-controller中定义的控制器触发，但数据绑定不起作用 - 结果是

{{data.name}}

喜欢它根本没有编译......为什么？（我第一次使用$ compile，也许我错过了什么）

以下是指令代码：

app.directive('pages', function ($compile) {
  return {
    restrict: 'E',
    link: function (scope, element) {
      element.on('pageLoaded', function(event){
        var page = angular.element(event.detail.element);

        var linkFn = $compile(page);

        scope.data = {
          name: 'DATA SET IN DIRECTIVE'
        };

        linkFn(scope);
      });
    }
  }
});

页面我添加（event.detail.element中的dom元素）是

<div page="AddedPage" ng-controller="PageController">
{{data.name}}
</div>

这是jsfiddle：http://jsfiddle.net/yoorek/EYCwY/

Answer 1

将addPage添加到控制器中并使用ng-click

http://jsfiddle.net/EYCwY/1/

<div ng-app="app" ng-controller="AppController">
<button ng-click="addPage()">Add Page</button>
<pages>
    <page page="StaticPage">
    </page>
</pages>

app.controller('AppController', function ($scope) {
  log('App Controller');

  $scope.data = {
    name: 'Data set in AppController'
  }

  $scope.addPage = function () {
  var page = document.createElement('div');
  var parent = document.getElementsByTagName('pages')[0];

  page.setAttribute('page', 'AddedPage');
  page.setAttribute('ng-controller', 'PageController');
  page.innerHTML = '{{data.name}}';

  parent.appendChild(page);

  var event = new CustomEvent(
      "pageLoaded",
      {
        detail: {
          page: "AddedPage",
          element: page
        },
        bubbles: true,
        cancelable: true
      }
  );

  parent.dispatchEvent(event);
};
});

Answer 2

您没有将元素添加到DOM。见this Fiddle：

scope.$apply(function () {          
    element.replaceWith($compile(page)(scope));
});

如果要添加多个页面，请将其添加而不是替换它。

此外，我建议阅读this post关于AngularJS的建议和概念。

$ compile后，新元素的控制器工作但数据绑定不起作用

2 个答案: