SORU
20 EYLÜL 2013, Cuma


Açısal UI ile kapsam sorunları kalıcı

Sorun/anlama açısal UI kalıcı için kapsamları kullanarak geçiriyorum. Yüksek ve düşük aradım ve belgeleri tekrar okuyun. Şimdi, toplum için açıyorum.

Sadece basit bir şey bakan olduğumu umuyorum. Oldukça yeni Açısal değilim ama Javascript ile tanıdık.

Hemen burada belirgin olmasa da, modülleri var ve her şey doğru şekilde ayarlanmış (söyleyebileceğim kadarıyla), ama bu kod örnekleri, hata buluyorum özellikle.

index.html (önemli kısmı)

<div class="btn-group">
    <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
        Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right text-left">
        <li><a ng-click="addSimpleGroup()">Add Simple</a></li>
        <li><a ng-click="open()">Add Custom</a></li>
        <li class="divider"></li>
        <li><a ng-click="doBulkDelete()">Remove Selected</a></li>
    </ul>
</div>

Controller.js (yine, önemli bir kısmı)

MyApp.controller('AppListCtrl', function($scope, $modal){
    $scope.name = 'New Name';
    $scope.groupType = 'New Type';

    $scope.open = function(){
        var modalInstance = $modal.open({
            templateUrl: 'partials/create.html',
            controller: 'AppCreateCtrl'
        });
        modalInstance.result.then(function(response){

            // outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
            // despite the user entering customized values
            console.log('response', response);

            // outputs "New Name", which is fine, makes sense to me.                
            console.log('name', $scope.name);

        });
    };
});

MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
    $scope.name = 'Custom Name';
    $scope.groupType = 'Custom Type';

    $scope.ok = function(){

        // outputs 'Custom Name' despite user entering "TEST 1"
        console.log('create name', $scope.name);

        // outputs 'Custom Type' despite user entering "TEST 2"
        console.log('create type', $scope.groupType);

        // outputs the $scope for AppCreateCtrl but name and groupType
        // still show as "Custom Name" and "Custom Type"
        // $scope.$id is "007"
        console.log('scope', $scope);

        // outputs what looks like the scope, but in this object the
        // values for name and groupType are "TEST 1" and "TEST 2" as expected.
        // this.$id is set to "009" so this != $scope
        console.log('this', this);

        // based on what modalInstance.result.then() is saying,
        // the values that are in this object are the original $scope ones
        // not the ones the user has just entered in the UI. no data binding?
        $modalInstance.close({
            name: $scope.name,
            groupType: $scope.groupType
        });
    };
});

create.html (bütünüyle)

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">x</button>
    <h3 id="myModalLabel">Add Template Group</h3>
</div>
<div class="modal-body">
    <form>
        <fieldset>
            <label for="name">Group Name:</label>
            <input type="text" name="name" ng-model="name" />           
            <label for="groupType">Group Type:</label>
            <input type="text" name="groupType" ng-model="groupType" />
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="ok()">Add</button>
</div>

Yani, benim soru duruyor: neden kapsam UI için çift bağlı olmak değil mi? ve neden 'bu' özel değerleri, ama $scope değil mi?

Ben denedim eklemek ng-kontrol="AppCreateCtrl" vücut div create.html ama o attı bir hata: "Bilinmeyen sağlayıcı: $modalİnstanceProvider <- $modalİnstance" yani hiç şans yok.

Bu noktada, tek seçeneğim bu bir nesne geçmek için.adı bu.yerine groupType kullanarak kapsam$; ama bu yanlış geliyor.

Şimdiden teşekkürler! :)

GÜNCELLEME: Okuma Nikos tarafından önerilen ek olarak, aynı zamanda yardımcı olabilecek tuzaklar this list. Bu sorun hatadır örneği #5.

CEVAP
20 EYLÜL 2013, Cuma


İç içe kapsam söz konusu olduğunda, değil bağlama <input>doğrudan kapsamında üyeleri için:

<input ng-model="name" /> <!-- NO -->

En az bir seviye daha derin bağlama onları

<input ng-model="form.name" /> <!-- YES -->

Nedeni kapsamları prototypically üst kapsam devralır. 1. seviye üyeler belirlerken, bu doğrudan üst etkilemeden alt kapsamı üzerinde ayarlanır. İç içe geçmiş alanlar (form.name) üye bağlanırken bunun aksine, form üst kapsamdan okunur name özelliği erişme doğru hedef erişir.

Daha ayrıntılı bir açıklama here okuyun.

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Charles Griffin Gibson

    Charles Grif

    26 NİSAN 2006
  • JamesAtiPhone

    JamesAtiPhon

    16 EYLÜL 2010
  • stokelycalm

    stokelycalm

    28 Aralık 2010