新元素的$ compile控制器工作，但數據綁定不是

我添加了DOM元素（Angular外部），$編譯它，並將其與範圍內的指令的事件處理程序 - 新元素ng控制器中定義的控制器啓動，但數據綁定不工作 - 結果是

{{data.name}}

像它不是在所有編譯的，爲什麼？（我用$編譯首次所以，也許我失去了一些東西）

以下僅僅是指令代碼：

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/

來源

2014-05-09 Yoorek

你沒有的元素添加到DOM。見this Fiddle：

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

如果要添加多頁，添加它，而不是替換它。

此外，我建議通過this post閱讀關於AngularJS的建議和概念。

來源

2014-05-09 09:20:47

感謝您的解決方案 - 犯了一個愚蠢的錯誤:-)建議閱讀知道心臟，但它與我正在處理的項目無關 - 非常特殊的情況出現在外部庫中的頁面，無法更改，尋找解決方案以某種方式消除這些解決方案。 – Yoorek

聽起來不錯！我不知道有項目限制。當我看到很多與AngularJS結合使用的jQuery「框架」時，我通常鏈接到鏈接的帖子，僅供參考。 –

嗯...雖然有一個問題 - replacewith使雙向數據綁定無法正常工作。當使用附加數據綁定工作 - 這裏是codepen：http://codepen.io/yoorek/pen/kcFqJ。當你用append改變replaceWith時，你會看到它的作用。任何想法爲什麼？ – Yoorek

添加addPage到控制器和使用NG單擊

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); 
}; 
});

來源

2014-05-09 09:19:06

不建議在控制器中進行DOM操作。這使得您無法重用或測試的代碼：控制器與視圖高度耦合，而不是通過範圍和事件進行通信。 –

這是真的......這是一個很大的...我只是想讓他的代碼工作:) –

@stevuu - 我希望你明白這只是一個快速的樣本不生產代碼？ :-)）） – Yoorek

新元素的$ compile控制器工作，但數據綁定不是

回答

相關問題