Как передать значение в локальную область действия директивы?

Я изучаю директивы, это классно, но иногда немного сложно. Пожалуйста, может кто-нибудь объяснить это: У меня есть настраиваемая директива с шаблоном небольшого размера и его собственная локальная область, и вы хотите изменить список элементов из основного контроллера. Пожалуйста, смотрите его: При нажатии на кнопку изменения я открыть собственную директиву с шаблоном формы вводаКак передать значение в локальную область действия директивы?

<body ng-controller="testCtrl"> 
     <h1>Hello Plunker!</h1> 
     <ul> 
      <li ng-repeat="item in list"> 
      <div> {{item}} </div> 
      <button ng-click="edit()">Change</button> 
      <change ng-if='editable'></change> 
      </li> 
     </ul> 
     </body>

«Изменить» обычай директивы с входной формы внутри другого Html файла

.directive('change', function(){ 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
     show: '=' 
     }, 
     templateUrl: "other.html" 
    } 
    })

Также есть другая директива внутри директивы «change». Это кнопка, которую я хочу использовать внутри директивы «change» и внутри моего основного контроллера. Я могу видеть список товаров только из области. $ Parent.item, но как передать его в функции моей директивы кнопок? Как это реализовать?

.directive('save', function(){ 
    return { 
     restrict: "E", 
     replace: true, 
     template: ' <button class="btn btn-sm btn-warning" ng-click="saving(item)">SAVE</button>', 
     link: function(scope,element,attr){ 
     scope.saving = function(item){ 
     console.log(item); 
     console.log(scope.$parent.item) 
     } 

     } 
    } 
    })

Пожалуйста, смотрите пример: Plnkr

P.S. Извините за мое объяснение, я надеюсь, что все ясно.

источник

2015-08-03 DarthJS

нужно понимать, что у вас есть несколько областей происходит. Первый 'ng-repeat' создает дочернюю область для каждого повторяющегося элемента. У вашей директивы изменения есть выделенный объем. Поэтому 'save' внутри' change' наследует изолированную область, которая не включает 'item' в этой изолированной области. У 'save' вне' change' есть доступ к элементу в дочерней области 'ng-repeat'. Действительно важно понимать концепции сферы.попробуйте проверить их в dev tools – charlietfl

Предложите вам передать 'item' в' change', так как вы выделили эту область. Общее правило - если вы ищете '$ parent', вы, вероятно, делаете что-то неправильно – charlietfl

Я думаю, что я до сих пор не понял, какой конечный результат вы ожидаете. – Gabriel

Просто передайте в item каждой из ваших директив, которым необходим доступ к ней. Например:

<li ng-repeat="item in list"> 
    //snip 
    <save item="item"></save> 
    //snip 
</li>

А затем определить вашу директиву, чтобы связать атрибут рамки:

.directive('save', function(){ 
    return { 
     //snip 
     scope: { 
      item: '=' //two-way binding to 'scope.item' 
     }, 
     //snip 
     link: function(scope, element, attr){ 
      scope.saving = function() { 
       console.log(scope.item); 
      } 
     }; 
    });

источник

2015-08-03 01:27:12 ach

В angularjs, у вас есть $emit событие.

Отправляет имя события вверх по иерархии областей, уведомляя зарегистрированных пользователей $rootScope.Scope. $rootScope.Scope

HTML

<body ng-controller="testCtrl"> 
    <h1>Hello Plunker!</h1> 
    <ul> 
     <li ng-repeat="item in list"> 
     <div> {{item}} - <input type="text" ng-model="item"> 

     <button ng-click="edit()">Change</button> 
     </div> 
     <div> 

     <change ng-if='editable'></change> 
     </div> 
     </li> 
    </ul> 
    </body>

Директива

directive('save', function(){ 
    return { 
     restrict: "E", 
     replace: true, 
     template: ' <button class="btn btn-sm btn-warning" ng-click="saving(item, $parent.$index)">SAVE</button>', 
     link: function(scope,element,attr, controller){ 
     scope.saving = function(item, index){ 
      //Build our object with the index of $scope.list which is updated & the item value 
     var obj = { 
      index: index, 
      item: item 
     }; 
     //Emit a 'change' event, and we pass our object data 
     scope.$emit('change', obj) 
     } 

     } 
    } 
    })

В директиве "изменение", мы используем $emit передать событие, и уведомить нашу $ rootScope.Scope , В шаблоне директивы «change» вы можете увидеть, что мы передаем родительский $. $ Index, а не $ index, чтобы получить текущий элемент списка.

Контроллер

controller('testCtrl', function($scope){ 

    $scope.list = [1,2,3,4,5,6,7,8,9]; 

    //Listen for 'change' event 
    $scope.$on('change', function(event,value){ 
     //Set to the list value.index our value.item 
     $scope.list[value.index] = value.item; 
    }); 

    $scope.editable = false; 

    $scope.edit = function(){ 
     $scope.editable = !$scope.editable; 
    } 

    })

источник

2015-08-03 01:31:47

Как передать значение в локальную область действия директивы?

ответ

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