Veri bağlamadan değer oluşturma

AngularJS'de 2 yönlü veri bağlama olmadan bir değeri nasıl işleyebilirim? Bunu performans nedenleriyle yapmak, hatta belirli bir zamanda belirli bir noktada bir değer oluşturmak isteyebilirsiniz.

Aşağıdaki örneklerin her ikisi de veri bağlamayı kullanır:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

value Herhangi bir veri bağlama olmadan nasıl render edebilirim ?

Açısal 1.3+

1.3'te Angular, aşağıdaki sözdizimini kullanarak bunu destekledi.

<div>{{::message}}</div>

Bu cevapta belirtildiği gibi .

Açısal 1.2 ve altı

Bu basittir ve bir eklentiye ihtiyaç duymaz. Şuna bak.

Bu küçük yönerge, başarmaya çalıştığınız şeyi kolayca gerçekleştirecek

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Böyle bir kez bağlayabilirsin

<div bind-once>I bind once - {{message}}</div>

Normal gibi bağlanabilirsin

<div ng-bind="message" bind-once></div>

Demo: http://jsfiddle.net/fffnb/

Bazılarınız açısal batarang kullanıyor olabilir ve yorumlarda da belirtildiği gibi, bu yönergeyi kullanırsanız, öğe, olmadığı halde hala bağlayıcı olarak gösterilir, bunun öğeye eklenmiş sınıflarla bir ilgisi olduğundan oldukça eminim. bunu deneyin, çalışmalıdır (test edilmemiştir) . Sizin için işe yarayıp yaramadığını yorumlarda bana bildirin.

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@ x0b : OKB'niz varsa ve boş classniteliği kaldırmak istiyorsanız bunu yapın

!$element.attr('class') && $element.removeAttr('class')

Görünüşe göre Angular 1.3 (beta 10'dan başlayarak) yerleşik tek seferlik bağlama içerir:

https://docs.angularjs.org/guide/expression#one-time-binding

Tek seferlik ciltleme

:: ile başlayan bir ifade, tek seferlik bir ifade olarak kabul edilir. Tek seferlik ifadeler, kararlı olduklarında yeniden hesaplamayı durdurur; bu, ifade sonucu tanımlanmamış bir değerse ilk özetten sonra gerçekleşir (aşağıdaki değer sabitleme algoritmasına bakın).

Bindonce modülünü kullanın . JS dosyasını eklemeniz ve bunu bir bağımlılık olarak uygulama modülünüze eklemeniz gerekir:

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

Bu kitaplık, yalnızca bir kez bağlanan öğeleri - ilk başlatıldıklarında - oluşturmanıza olanak tanır. Bu değerlerde yapılacak diğer güncellemeler dikkate alınmayacaktır. Oluşturulduktan sonra değişmeyecek şeyler için sayfadaki izlenme sayısını azaltmanın harika bir yoludur.

Kullanım örneği:

<div bo-text="value"></div>

Bu şekilde kullanıldığında, altındaki özellik kullanılabilir valueolduğunda ayarlanacak, ancak saat devre dışı bırakılacaktır.

@OverZealous ve @Connor cevapları arasındaki karşılaştırma:

Geleneksel ngRepeat of angular ile: 2000 sıra için 15s ve 420mo RAM ( Plunker )

NgRepeat ve @OverZealous modülü ile: 2000 satır için 7s ve 240mo RAM ( Plunker )

NgRepeat ve @Connor yönergesi ile: 2000 satır için 8s ve 500mo RAM ( Plunker )

Testlerimi Google Chrome 32 ile yaptım.

Alternatif olarak angular-oncepaket var:

AngularJS kullanıyorsanız, performans sorunları yaşıyorsanız ve çok sayıda salt okunur veriyi görüntülemeniz gerekiyorsa, bu proje tam size göre!

angular-onceaslında esinlenmiştir bindonceve benzer once-*özellikler sağlar:

<ul>
    <li ng-repeat="user in users">
      <a once-href="user.profileUrl" once-text="user.name"></a>
        <a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
        <div once-class="{'formatted': user.description}" once-bind="user.description"></div>
    </li>
</ul>