İzole kapsam ve ng-model Direktifi

İzole kapsam ve ngModel yönergesini kullanan bir yönerge yazmaya çalışıyorum.İzole kapsam ve ng-model Direktifi

Sorun:
Model yönergede güncellendiğinde, arayanın değeri güncellenmiyor.

HTML:

<test-ng-model ng-model="model" name="myel"></test-ng-model>

Yönergesi:

app.directive(
    'testNgModel', [ 
    '$timeout', 
    '$log', 

function ($timeout, $log) { 

    function link($scope, $element, attrs, ctrl) { 
     var counter1 = 0, counter2 = 0; 

     ctrl.$render = function() { 
      $element.find('.result').text(JSON.stringify(ctrl.$viewValue)) 
     } 

     $element.find('.one').click(function() { 
      if ($scope.$$phase) return; 
      $scope.$apply(function() { 
       var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {}; 
       form.counter1 = ++counter1; 
       ctrl.$setViewValue(form); 
      }); 
     }); 
     $element.find('.two').click(function() { 
      if ($scope.$$phase) return; 
      $scope.$apply(function() { 
       var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {}; 
       form.counter2 = ++counter2; 
       ctrl.$setViewValue(form); 
      }); 
     }); 

     $scope.$watch(attrs.ngModel, function (current, old) { 
      ctrl.$render() 
     }, true) 
    } 

    return { 
     require: 'ngModel', 
     restrict: 'E', 
     link: link, 
     //if isolated scope is not set it is working fine 
     scope: true, 
     template: '<div><input type="button" class="one" value="One"/><input type="button" class="two" value="Two"/><span class="result"></span></div>', 
     replace: true 
    }; 

}]);

Demo: it ayarlı değil izole kapsamı çalışıyor Fiddle

_{ise: fiddle}

kaynak

2013-08-31 Arun P Johny

'kapsamı: TRUE bir izolatı kapsamını yaratmaz, bu prototip ebeveyn kapsamından devralan yeni çocuk kapsamını oluşturur Bu nedenle, $ parent.model'nin çalışmasının nedeni. (Kapsam: {...} sözdizimini kullandığımız zaman bir izolat kapsamı oluşturulur. Burada yeni bir çocuk kapsamı da oluşturulur, ancak ebeveyn tarafından prototip olarak devralmaz.) Genel olarak, bir çocuk kapsamı olmalıdır. ng-modeliyle birlikte kullanıldığında, diğer direktiflerle (örn. ng-model) etkileşime girmesi gereken bir bileşen yaratıyorsunuz. Bu yüzden, senin ikinciyle çalışmanı öneririm, keman. –

@MarkRajcok, yönerge daha karmaşık olduğu için benim için bir seçenek değildir ve ana kapsamın kirliliğine yol açacak kapsam için bazı öznitelikler ekler –

Tamam, 'kapsam: true' işlevini kullanın, ancak aynı zamanda bir nesne kullanın, ilkel değil: ''. [Kemençe] (http://jsfiddle.net/mrajcok/6ZaB5/). –

, genellikle ng-model ile çocuk kapsamını (scope: true veya scope: { ... }) kullanmak için tavsiye edilmez. Ancak, Arun'un ek kapsam özellikleri oluşturması gerektiğinden, scope: true bir ilkel değil bir nesne ile kullanılabilir. Bu prototipi miras güçlendirir, böylece $parent neeed değildir:

<test-ng-model ng-model="someObj.model" ...>

fiddle

kaynak

2013-08-31 15:44:04

yeni kapsam yerine yeni kapsam http://jsfiddle.net/arunpjohny/gbfNY/1/ –

@ ArunPJohny ile çalışmak mümkün olabilir, üst kapsamı güncelleştiriliyor değil - fark var ki {{someObj. model | json}} 'çıktı boş. İzolama kapsamları ve ng modelinin nasıl karıştırılmadığı hakkında daha fazla bilgi için bkz. Http://stackoverflow.com/questions/11896732/ngmodel-and-component-with-isolated-scope. –

oluşturduğunuz Çünkü bir iso örtülü kapsam, ngModel = "model", yeni yalıtılmış kapsamınızı ifade eder. Eğer AppController kapsamı başvurmak istiyorsanız, size $ ebeveyni kullanmalısınız:

yorumlarda bahsedildiği gibi

<test-ng-model ng-model="$parent.model" name="myel"></test-ng-model>

kaynak

2013-08-31 14:10:25

'Kapsam: true' bir izolat kapsamı oluşturmuyor. –

İyi nokta. Kapsam yalıtılmasa bile, çözümüm zaten işe yarayacaktı. Ama önerdiğiniz çözüm çok daha iyi. –

İzole kapsam ve ng-model Direktifi

cevap

İlgili konular