angular direction won't更新与控制器的双向绑定

angular directive won't update two-way binding with controller

本文关键字：控制器 绑定 更新 won direction angular      更新时间：2023-09-26

我有一个模式指令，当按下按钮时，该指令应该可见。然而，负责确定与指令双向绑定的模态是否应该是开放的值似乎不会更新。有什么想法吗？

这是指令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 URL:

<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>

以及我的通用HTMl 中的模式对话框选择指令

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

你知道scope.show为什么没有在我的指令中更新吗？谢谢

您的模态模板在生成时出现问题

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>

这可能是javascript传递值的有趣问题，因为var是一个bool。老实说，我不善于解释这件事的根本原因。

尝试将其作为对象传递

ng-click='selectCustomer.value = true'

那么您的show scope属性将是scope.show.value.

似乎工作得很好。。。

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's 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>

相关文章：