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

  • amc

    amc

    21 EYLÜL 2005
  • Associated Press

    Associated P

    18 EYLÜL 2006
  • Microsoft Research

    Microsoft Re

    24 EKİM 2008