AngularJS - çocuk yönergelerindeki ana yönerge özelliklerine erişme

Bu, yapılması zor bir şey olmamalı, ancak en iyi şekilde nasıl yapılacağını anlayamıyorum.AngularJS - çocuk yönergelerindeki ana yönerge özelliklerine erişme

directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    replace: true, 
    transclude: true, 

    template: ' 
     <div class="editable-fieldset" ng-click="edit()"> 
     <div ng-transclude></div> 

     ... 

     </div>', 

    controller: ['$scope', function ($scope) { 
     $scope.edit = -> 
     $scope.editing = true 

     // ... 
    ] 
    }; 
});

Ve çocuk direktifi:

.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 

    template: function (element, attrs) { 
     '<div> 
     <label>' + attrs.label + '</label> 
     <p>{{ model.' + attrs.field + ' }}</p> 

     ... 
     </div>' 
    }, 
    require: '^editableFieldset' 
    }; 
});

Kolayca çocuk yönergesi gelen ebeveyn direktifin model ve editing özelliklerine erişebilirsiniz nasıl

ben şöyle bir ebeveyn direktif var ? Bağlantı işlevimde üst kapsama erişimim var - bu özellikleri izlemek için $watch kullanmalı mıyım?

birlikte koyun, ne olmasını istiyorum geçerli:

<editable-fieldset model="myModel"> 
    <editable-string label="Some Property" field="property"></editable-string> 
    <editable-string label="Some Property" field="property"></editable-string> 
</editable-fieldset>

fikri varsayılan olarak görüntülenir alanlar dizisini sahip olmaktır. Tıklandığında, bunlar giriş olur ve düzenlenebilir.

kaynak

2013-11-26 Rahul Sekhar

Son biçimlendirmenin nasıl görüneceğine dair bir örnek verebilir misiniz? –

Bunu şimdi ekledim –

this SO post'dan ilham alarak, here in this plunker çalışan bir çözümüm var.

Biraz değiştirmem gerekiyordu. editableString üzerinde de izole bir kapsam oluşturmayı tercih ettim, çünkü şablona doğru değerler arasında bağlantı kurmak daha kolaydı. Aksi halde, compile veya başka bir yöntem ($transclude servisi gibi) kullanmanız gerekecek.

JS: Burada

sonucudur

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

myApp.controller('Ctrl', function($scope) { 

    $scope.myModel = { property1: 'hello1', property2: 'hello2' } 

}); 


myApp.directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    transclude: true, 
    replace: true, 
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>', 
    link: function(scope, element) { 
     scope.edit = function() { 

     scope.editing = true; 
     } 
    }, 
    controller: ['$scope', function($scope) { 

     this.getModel = function() { 
     return $scope.model; 
     } 

    }] 
    }; 
}); 

myApp.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     label: '@', 
     field: '@' 
    }, 
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>', 
    require: '^editableFieldset', 
    link: function(scope, element, attrs, ctrl) { 

     scope.model = ctrl.getModel(); 
    } 
    }; 
});

HTML:

<body ng-controller="Ctrl"> 
    <h1>Hello Plunker!</h1> 
    <editable-fieldset model="myModel"> 
     <editable-string label="Some Property1:" field="property1"></editable-string> 
     <editable-string label="Some Property2:" field="property2"></editable-string> 
    </editable-fieldset> 
    </body>

kaynak

2013-11-26 11:14:14

Teşekkür ederim. Bu, 'düzenleme' gibi bir dinamik özelliğe erişmeye gerçekten yardımcı olmaz. Çocuk yönetmeliğimde bunu takip etmek için '$ watch' kullanmam gerekecek mi? –

Ayrıca, "alan" ve "etiket" gibi sabit, değişmeyen öznitelikler için bunları düşünürdüm, bunları şablon üreten bir işleve ileterek bunları bağlama olarak eklemekten daha hızlı olurdu. Her sindirim döngüsünde, değişmeyecek bağları kontrol etmek için zaman kaybetmeye gerek yoktur, değil mi? –

Çocuğun bir özelliğini düzenlemiyor mu? Ya da sadece bir çocuğu bir seferde düzenlemek ister misiniz? –

Sen çocuk direktifi bağlantı fonksiyonunda niteliğini geçirerek ana kontrolöre erişebilirsiniz

link: function (scope, element, attrs, parentCtrl) { 
    parentCtrl.$scope.editing = true; 
}

kaynak

2013-11-26 11:15:04 user3036090

bu dördüncü paramı alırsınız: ... gerektirir: "^ parentCtrl" – Leonardo

Evet ve kavram, direktifler belgesinde "bağlantı kurulama" ** "Communications Direktifi Oluşturma" bölümünde açıklanmıştır [link] (https : //docs.angularjs.org/guide/directive) – Harish

AngularJS - çocuk yönergelerindeki ana yönerge özelliklerine erişme

cevap

İlgili konular