2013-12-13 43 views
2

我想從我的站點的頂層關閉角插值,但重新啓用它爲單個元素。只打開特定DOM層次結構上的angularjs?

我想向一個相當大的遺留網站添加一些角度功能,並且不可能在任何可能包含{{bindable}}括號的地方添加ng-non-bindable。這一點尤其重要,因爲該網站在這些括號內可能有{{unparseable:er9 >-14?%(% randomness}}。 (Angular爲此拋出了一個[$ parse:syntax]錯誤,並停止解析我的頁面的其餘任何部分)

理想情況下,我會在每個頁面上設置類似<html ng-app="MyApp" ng-non-bindable>的東西,然後在少數地方設置<div ng-controller="myController">那實際上使用角度。

到目前爲止,我還沒有想出一個辦法來做到這一點。我看着改變角分析器忽略文本節點,直到它看到一個控制器,但這似乎是矯枉過正。我也嘗試將ng-app僅添加到我希望應用程序生活的節點上,但是之後我必須使用該應用程序手動引導每個節點,並且我認爲這會導致我有多個應用程序同時運行的副本以及任何我是希望將(如cacheing)將被多次實例化(除非我錯了這件事?)

有沒有把ng-appng-non-bindable在頂層<html>的方式,然後手動添加我關心的div到應用程序?

我已經設置了plunkr一個簡單的例子:http://plnkr.co/edit/antMrWmWnKXHcxklh9IY?p=preview

+0

您是否探索過一個自定義指令,該指令通過CSS選擇器查找ngNonBindable中的元素,然後對它們運行$ compile? –

+0

您可以使用angular.bootstrap注入(DI註釋)工廠方法返回一個單例,從而在多個位置注入相同的應用程序。 –

+0

@MichalCharemza:我花了一段時間才弄清楚如何做到這一點,但它的工作原理!我已經分叉原始的plunkr並進行修復:http://plnkr.co/edit/2rWCy7dwJNqTShXKiLgG?p =預覽 – nickburlett

回答

2

Michal Charemza的上面的評論導致我工作的解決方案。

我寫的編譯並附着到$rootScope在(使用jquery)各[ng-bindable]元件的終端的指令:

app.directive('defaultNonBindable', ['$compile', '$rootScope', 
    function($compile, $rootScope) { 
    return { 
     compile: function(scope, elm, attrs) { 
     var bindables = $('[ng-bindable]'); 
     bindables.each(function() { 
       var el = angular.element(this), 
       compiled = $compile(el); 
      compiled($rootScope); 
     }); 
     }, 
     terminal: true, 
    } 
    } 
]); 

我然後換行真實角指明分數在NG-可綁定DIV每個塊:

<div ng-bindable> 
    <div ng-controller="MyController"> 
     {{this_works}} 
    </div> 
</div> 

我分叉原plunkr與它的一個例子的工作:http://plnkr.co/edit/2rWCy7dwJNqTShXKiLgG?p=preview

0

一個可能的解決辦法是在某種程度上配置的角度,它是不是找大括號,但對於插自己的特殊語法。

var myApp = angular.module('App', []); 
myApp.config(function($interpolateProvider) { 
      $interpolateProvider.startSymbol('[['); 
      $interpolateProvider.endSymbol(']]'); 
}); 
myApp.controller("Ctrl", function($scope){ 
    $scope.value="value"; 
}); 

<div>[[value]]</div> 

Plunker

我沒有測試它,可能有一些副作用的,尤其是第三方的代碼,但它可能是用於管理過渡階段

問候

方式
+0

我想過,但在我的網站[[和其他隨機字符串一樣可能。我需要確保只有我關心的div被解析。 – nickburlett