SORU
10 Kasım 2012, CUMARTESİ


Kolay denetleyicisi için verilen Emre AngularJS kapsamında bir değişken geçmek için bir yol?

Denetleyicisi için verilen Emre AngularJS kapsamında bir değişken geçmek için en kolay yolu nedir? Gördüğüm örneklerin hepsi çok karışık görünüyor, orada bir yönerge, bir denetleyici erişim ve kapsam değişkenleri kümesi bir yolu değil mi?

CEVAP
10 Kasım 2012, CUMARTESİ


Düzenlenebilir 2014/8/25: Here ben çatallı yerdi.

Teşekkürler @anvarik.

Burada JSFiddle. Bu çatal nereye unuttum. Ama bu iyi bir örnek, = ve @ arasındaki farkı gösteriyor

<div ng-controller="MyCtrl">
    <h2>Parent Scope</h2>
    <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>    
    <br><br>
    <!-- attribute-foo binds to a DOM attribute which is always
    a string. That is why we are wrapping it in curly braces so
    that it can be interpolated. -->
    <my-component attribute-foo="{{foo}}" binding-foo="foo"
        isolated-expression-foo="updateFoo(newFoo)" >
        <h2>Attribute</h2>
        <div>
            <strong>get:</strong> {{isolatedAttributeFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
            <i>// This does not update the parent scope.</i>
        </div>
        <h2>Binding</h2>
        <div>
            <strong>get:</strong> {{isolatedBindingFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedBindingFoo">
            <i>// This does update the parent scope.</i>
        </div>
        <h2>Expression</h2>    
        <div>
            <input ng-model="isolatedFoo">
            <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
            <i>// And this calls a function on the parent scope.</i>
        </div>
    </my-component>
</div>
var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between
                parent and isolated scope. */                
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }        
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'Hello!';
        $scope.updateFoo = function (newFoo) {
            $scope.foo = newFoo;
        }
    }]);

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Blunty

    Blunty

    13 Mart 2006
  • CMTelly

    CMTelly

    2 Mayıs 2007
  • UrAvgConsumer

    UrAvgConsume

    1 Ocak 2012