угловая директива не будет обновлять двустороннюю привязку с контроллером

Question

угловая директива не будет обновлять двустороннюю привязку с контроллером

0

У меня есть модальная директива, которая должна стать видимой при нажатии кнопки. однако значение, определяющее, должно ли модальное быть открытым, которое является двусторонним, связано с директивой, похоже, не обновляется. есть идеи?

вот директива JS:

function modalDialogSelect() {
  return {
    restrict: 'AE',
    scope: {
      show: '='
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    templateUrl: "./views/directive_templates/select_modal.html"
  };
 }

директива Внутренний HTML-адрес:

<div class='ng-modal' ng-show='show'>
  <div class='ng-modal-overlay' ng-click='hideModal()'></div>
    <div class='ng-modal-dialog' ng-style='dialogStyle'>
      <p>Select New Customer</p>
    </div>
  </div>
</div>

кнопку, чтобы щелкнуть и открыть модальный:

<button ng-click='selectCustomer = true;'>SELECT/CREATE CUSTOMER</button>

и директива modal-dialog-select в моем общем HTMl

<modal-dialog-select show='selectCustomer'></modal-dialog-select>

любые идеи, почему scope.show не обновляется в моей директиве? Благодарю!

austin809 30 июнь 2015, в 21:03

Источник

Теги:

javascript

angularjs

angular-directive

3 ответа

0

Кажется, отлично работает...

function modalDialogSelect() {
  return {
    restrict: 'AE',
    scope: {
      show: '='
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><button ng-click='hideModal()'>Here the Modal</button></div>"
  };
}

angular.module('test', [])
  .controller('testCtrl', function() {})
  .directive('modalDialogSelect', modalDialogSelect);

<script src="https://code.angularjs.org/1.3.0/angular.js"></script>

<div ng-app="test">
  <div ng-controller="testCtrl as vm">

    <button ng-click='vm.selectCustomer = true;'>SELECT/CREATE CUSTOMER</button>

    <modal-dialog-select show='vm.selectCustomer'></modal-dialog-select>

  </div>
</div>

jme11 30 июнь 2015, в 17:45

0

Это может быть интересной проблемой передачи javascript по значению, поскольку var является bool. Честно говоря, я плохо объясняю первопричину этого.

Попробуйте передать его как объект

ng-click='selectCustomer.value = true'

Тогда ваше свойство области видимости будет областью scope.show.value.

Rick Willis 30 июнь 2015, в 16:30

0

не повезло :( Я ценю предложение!
austin809 30 июнь 2015, в 18:47
0

я предполагаю, что вы все еще передаете переменную как <modal-dialog-select show = 'selectCustomer'> </ modal-dialog-select>
Rick Willis 30 июнь 2015, в 18:51
0

@RickWillis Я догадывался, что это тоже может быть проблемой ... не могли бы вы написать полный пример кода с html для кнопки и модальным использованием с использованием для OP, пожалуйста?
ggalmazor 30 июнь 2015, в 18:56

Показать ещё 1 комментарий

Ещё вопросы

я предполагаю, что вы все еще передаете переменную как <modal-dialog-select show = 'selectCustomer'> </ modal-dialog-select>
@RickWillis Я догадывался, что это тоже может быть проблемой ... не могли бы вы написать полный пример кода с html для кнопки и модальным использованием с использованием для OP, пожалуйста?

ggalmazor · Accepted Answer · 2015-06-30T17-29-00.000Z

У вас возникла проблема в вашем модальном шаблоне, который

Error: Template must have exactly one root element. was: 
<div class='ng-modal' ng-show='show'>
  <div class='ng-modal-overlay' ng-click='hideModal()'></div>
  <div class='ng-modal-dialog' ng-style='dialogStyle'>
    <p>Select New Customer</p>
  </div>
        </div>
</div>

После удаления последнего </div> все работает.

var app = angular.module("myApp", []);

app.controller('ParentController', function($scope) {
  $scope.selectCustomer = false;
});

app.directive('modalDialogSelect', function() {
  return {
    restrict: 'AE',
    scope: {
      show: '='
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    templateUrl: "modal.html"
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ParentController"> 

  <p>Flag is: {{selectCustomer}}</p>
  <button ng-click='selectCustomer = !selectCustomer'>SELECT/CREATE CUSTOMER</button>

  <modal-dialog-select show='selectCustomer'></modal-dialog-select>


  <script type="text/ng-template" id="modal.html">
    <div class='ng-modal' ng-show='show'>
      <div class='ng-modal-overlay' ng-click='hideModal()'></div>
      <div class='ng-modal-dialog' ng-style='dialogStyle'>
        <p>Select New Customer</p>
      </div>
    </div>
  </script>
</div>