Изолированные Директива охвата с двусторонним связыванием не отражает изменения в объеме контроллера -- javascript поле с участием angularjs поле с участием angularjs-directive пол Связанный проблема

Isolated scope directive with two way binding doesn't reflect changes in controller's scope


1
vote

проблема

русский

<Сильное> Сводка:

При попытке изменить переменную область (массив), которая была установлена ​​для двухстороннего привязки данных в пределах выделенной директивы на выделении, модификации переменной в директиве изолированной области не отражают изменения в объеме контроллера.

<Сильная> Пример игрушки:

В настоящее время у меня есть директива сортировки, которую я хочу определить на столе, которая использует NG-Repeat. NG-Repeat использует те же данные в <Код> ATableController Controller Scope для создания таблицы:
 <код> $scope.tableData = [{'col1' : 1,'col2' : 'fff'},                              {'col1' : 2,'col2' : 'aaa'},                              {'col1' : 3,'col2' : 'bbb'},                              {'col1' : 4,'col2' : 'ccc'}];   

Я хочу, чтобы Директива по сортировке манипулирует теми же данными из его изолированного объема.

Настройка в Директиве как следующее

 <код> ... scope :                   {                     tableSortData        : '=',                     tableSortRowAccessor : '=',                     tableSortPrimer      : '='                   }, ...   

упоминается в индексе как следующее

 <код> ... <body ng-controller="ATableController">        <table table-sort table-sort-data="tableData"> ...   

В рамках функции ссылки Обработчик кликов назначается заголовозу таблицы. Нажмите этот обработчик срабатывает от <код> sort функции, которая в конечном итоге выполняет эту строку кода.

<Код> scope.tableSortData = []; //which would be a sorting line in the real code

Эти изменения не сделаны изнутри контроллера, и поэтому таблица не меняется должным образом.

Это проблема ванильного JS, (неверные ссылки сделаны, и т. Д. ...) Или это что-то с моей угловой директивой. В любом случае, что я делаю не так, и как это может быть исправлено?

код:

plunkr

http://plnkr.co/edit/5yxrj6?p=info < / P >.

index.html

 <код>   <head>     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     <script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>     <link rel="stylesheet" href="style.css" />     <script src="script.js"></script>   </head>    <body ng-controller="ATableController">    <table table-sort table-sort-data="tableData">     <thead>         <tr>             <th>Column1</th>             <th>Column2</th>         </tr>      </thead>     <tbody>         <tr ng-repeat="row in tableData" >             <td>{{row.col1}}</td>             <td>{{row.col2}}</td>         </tr>     </tbody>    </table>   </body>  </html>   

script.js

 <код> var myApp = angular.module('myApp', [])    .controller('ATableController', function($scope)   {       $scope.tableData = [{'col1' : 1,'col2' : 'fff'},                          {'col1' : 2,'col2' : 'aaa'},                          {'col1' : 3,'col2' : 'bbb'},                          {'col1' : 4,'col2' : 'ccc'}];    })    .directive('tableSort', [function()   {     return {       restrict : 'A',       replace  : false,        scope :       {         tableSortData        : '=',         tableSortRowAccessor : '=',         tableSortPrimer      : '='       },        link : function(scope, element)       {         console.log(scope.tableSortData);          // Await click events on header         element.find('th').on('click.header', function(event)         {           var field = $(event.target).attr('field-name');           augmentTableSortData();         });          function augmentTableSortData()         {           console.log(scope);           console.log(scope.tableSortData);           scope.tableSortData = [];           console.log(scope.tableSortData);         }        }     }    }])   

Английский оригинал

Summary :

When attempting to modify a scope variable (an array) that has been set for two way data binding within an isolate scoped directive, the modifications to the variable within the isolated scope directive do not reflect the changes within the controller's scope.

Toy Example :

Currently I have a sorting directive that I want to define on a table that is using ng-repeat. ng-repeat is using the same data in the ATableController controller scope to create the table:

$scope.tableData = [{'col1' : 1,'col2' : 'fff'},                              {'col1' : 2,'col2' : 'aaa'},                              {'col1' : 3,'col2' : 'bbb'},                              {'col1' : 4,'col2' : 'ccc'}]; 

I want the sorting directive to manipulate the same data from within its isolated scope.

Set up in the directive as the following

... scope :                   {                     tableSortData        : '=',                     tableSortRowAccessor : '=',                     tableSortPrimer      : '='                   }, ... 

Referred to in index as the following

... <body ng-controller="ATableController">        <table table-sort table-sort-data="tableData"> ... 

Within the link function a click handler is assigned to the table header. On click this handler fires off the sort function which eventually runs this line of code.

scope.tableSortData = []; //which would be a sorting line in the real code

These changes are NOT made from within the controller and thus the table doesn't change as expected.

Is this a vanilla js problem, (wrong references are being made, etc...) or is it something with my angular directive. Either way, what am I doing wrong and how can this be fixed?

The Code :

plunkr

http://plnkr.co/edit/5yxRj6?p=info

index.html

  <head>     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     <script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>     <link rel="stylesheet" href="style.css" />     <script src="script.js"></script>   </head>    <body ng-controller="ATableController">    <table table-sort table-sort-data="tableData">     <thead>         <tr>             <th>Column1</th>             <th>Column2</th>         </tr>      </thead>     <tbody>         <tr ng-repeat="row in tableData" >             <td>{{row.col1}}</td>             <td>{{row.col2}}</td>         </tr>     </tbody>    </table>   </body>  </html> 

script.js

var myApp = angular.module('myApp', [])    .controller('ATableController', function($scope)   {       $scope.tableData = [{'col1' : 1,'col2' : 'fff'},                          {'col1' : 2,'col2' : 'aaa'},                          {'col1' : 3,'col2' : 'bbb'},                          {'col1' : 4,'col2' : 'ccc'}];    })    .directive('tableSort', [function()   {     return {       restrict : 'A',       replace  : false,        scope :       {         tableSortData        : '=',         tableSortRowAccessor : '=',         tableSortPrimer      : '='       },        link : function(scope, element)       {         console.log(scope.tableSortData);          // Await click events on header         element.find('th').on('click.header', function(event)         {           var field = $(event.target).attr('field-name');           augmentTableSortData();         });          function augmentTableSortData()         {           console.log(scope);           console.log(scope.tableSortData);           scope.tableSortData = [];           console.log(scope.tableSortData);         }        }     }    }]) 
</div
        

Список ответов

4
 
vote
vote
Лучший ответ
 

Проблема заключается в том, что вы не вызываете SCOPE.Apply в своей функции щелчка:

 <код>  function augmentTableSortData()     {       console.log(scope);       console.log(scope.tableSortData);       scope.tableSortData = [];       console.log(scope.tableSortData);       scope.$apply();   // <------ this needs to be called because the scope data is being modified in the click function outside of angular's digest cycle.     }   

Demo: http://plnkr.co/edit/as5wek?p=proeview< >

Документация :

SCOPES Укажите API ($ Apply) для распространения любых изменений модели через систему на вид снаружи «угловой царство» (контроллеров, услуг, угловых обработчиков событий).

 

The issue is that you are not calling scope.apply in your click function:

 function augmentTableSortData()     {       console.log(scope);       console.log(scope.tableSortData);       scope.tableSortData = [];       console.log(scope.tableSortData);       scope.$apply();   // <------ this needs to be called because the scope data is being modified in the click function outside of angular's digest cycle.     } 

Demo: http://plnkr.co/edit/as5Wek?p=preview

Documentation:

Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "Angular realm" (controllers, services, Angular event handlers).

</div
 
 

Связанный проблема

0  Asp.net внутри тега скрипта  ( Asp net inside a script tag ) 
Я пытаюсь получить некоторую работу с некоторыми JavaScript, который делает график в зависимости от предоставленной вами информации. Я говорю о Это <код...

0  Как добавить значение для массива после проверки другого массива  ( How to add value to array after checking another array ) 
У меня есть два массива как таковые: <код> UserGroupUser[{Id:"1",UserId:"2",UserGroupId"1"}, {Id:"2",UserId:"3",UserGroupId"1"}, {Id:...

3  OnleftClick & OnrightClick JavaScript Функции  ( Onleftclick onrightclick javascript functions ) 
В моем боковом коде сервера я динамически строим таблицу и именно сейчас я добавляю следующий код, чтобы обрабатывать Щелчок строки. <код> tr.Attributes.Add...

1  Расширение фона с помощью JavaScript  ( Extending a background using javascript ) 
У меня есть страница, которая выглядит так <код> ----------------------------------- | ************* | | ************* ...

0  Есть ли способ определить проверенную переключатель перед отправкой формы?  ( Is there a way to determine checked radio button before form submission ) 
Я работаю над созданием динамической формы проверки полосы. Я хотел бы, чтобы форма изменилась на основе выбора радиопередачи. Вот код у меня есть до сих пор....

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

13  Как перечислить все зарегистрированные события узла DOM с помощью JavaScript?  ( How to list all registered events of a dom node using javascript ) 
Я могу добавить или удалить обработчик событий для узла DOM. Можно ли выяснить все зарегистрированные обработчики событий данного узла DOM? Я имею в виду прям...

0  Почему угловые $ не удаляют старое значение?  ( Why is angular scope not removing old value ) 
У меня есть следующий контроллер <код> angular.module('publicApp') .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeou...

0  Обратный вызов для GridView Yii2 CheckboxColumn  ( Callback for yii2s gridview checkboxcolumn ) 
У меня есть <код> GridView (yii2) и один из столбцов - это логический тип данных. Я хочу быть в состоянии переключить это значение и сохранить его в моей баз...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

1  Путь нужна модуль в узле JS Работа в Windows, но не в Linux  ( Path of require module in node js work in windows but not in linux ) 
У меня это в моем коде <Код> var queries = require('./Queries.js'); При запуске сервера узла в Windows CMD в порядке. Я клонировать пролей в сервере Li...

8  Предотвращение DOM XSS  ( Preventing dom xss ) 
Мы недавно мы на борту чужого кода, который с тех пор был проверен, и не удалось, для атаки DOM XSS. В основном фрагменты URL передаются непосредственно в сел...

1  Как я могу выбрать вторую кнопку Отмена, а не первым?  ( How can i select the second cancel button instead of the first ) 
Я хочу отменить второй элемент строки вместо первого. Ниже приведен какой-то пример код для 2 позиций: <код> <div class="screenlet-body"> <form na...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.