0

Я новичок в angularjs. Я немного смущен об изолированном объеме в директивах. У меня есть следующий код,Директива Angularjs - значение изолированной области не определено

HTML

<!doctype html> 
<html ng-app="myApp"> 
<body ng-controller="componentsController"> 
    <div class="scope-one" data-param="a"> 
     <div class="scope-two" data-param="c"></div> 
    </div> 
    <!----> 
</body> 
</html> 

Script

angular.module('components', []) 
    .controller('componentsController', function($scope){ 
     $scope.a = { 
       "b": 1 
      }; 
     $scope.c = { 
       "d": 2 
      }; 
    }); 

    angular.module('myApp', ['components']) 
     .directive('scopeOne', function() { 
      return { 
       restrict: 'C', 
       scope: { 
        a: "=param" 
       }, 
       link: function(scope, element, attrs) { 
        console.log('one', scope); 
       } 
      }; 
     }) 
     .directive('scopeTwo', function() { 
      return { 
       restrict: 'C', 
       scope: { 
        c: "=param" 
       }, 
       link: function(scope, element, attrs) { 
        console.log('two', scope); 
       } 
      }; 
     }) 

Demohttp://jsfiddle.net/jPtb3/23/

Проблема У меня есть две директивы scope-one и scope-two, и я использую scope-two внутри scope-one. Для scope-one изолированный объем является точным и правильным, тогда как для scope-two значениями являются undefined. У меня проблемы, я делаю что-то неправильно? Оба изолированных значения области прекрасно, когда одна директива не находится в другой.

ответ

3

Сценарий 1: Когда scope-two не находится внутри scope-one обе директивы непосредственно под сферу действия контроллера и все работает, как ожидалось.

Сценарий 2: Когда scope-two находится внутри scope-one прежние директивы перемещается внутри объема последнего, а не непосредственно под сферу действия контроллера.

В этой ситуации вам необходимо использовать $parent для доступа к модели c области управления.

Это работает для меня:

<div class="scope-one" data-param="a"> 
    <div class="scope-two" data-param="$parent.c"></div> 
</div> 
+0

Awesome, вы выродок ... Спасибо за тонну. Но это хороший способ сделать это. Раньше вы исправляли его, отправляя область с другим параметром 'scope-one'. Что лучше? – moustacheman

+0

Это вполне естественно и намного чище, чем тот, о котором я упоминал ранее. Я бы предложил этот. – AlwaysALearner

Смежные вопросы