Javascript 自定义指令赢得'；t对属性更改作出反应

我目前正在构建一个模态指令，可以用来填充一些数据表。指令中有一个名为modal visible的属性，它是一个布尔值，默认值为false。如果默认值为true，则加载时，模态可见。但是，当我最初将其设置为false并更改事件中的值时，该属性会更改，但该指令不会拾取更改。我在指令的链接部分有一块手表，但它只拾取最初的变化

下面是我的代码示例。我只是有一个简单的测试页面，带有一个按钮和模式。模态属性“模态可见”设置为“false”。单击按钮时，模态的模态可见属性将更新为“true”，但该模态不会显示在页面上。有没有人能给我介绍一下这个解决方案，并给我一个很好的解释为什么会发生这种情况？谢谢

testing.html

<button id="btn1" class="btn btn-default">Click Me</button>
<modal id="chartModal" modal-title="Testing a Modal" modal-visible="false">
  <p>Body</p>
</modal>

<script type="text/javascript">
    var modal = $("#chartModal");
    var btn = $("#btn1");

    btn.on("click", function() {
        modal.attr("modal-visible", "true");
    })
</script>

modal.html（指令模板）

---

对于这种情况，您的手表在else块中

！attrs.modalVisible

，因此在该条件失败时触发。将指令（删除if-else块）修改为如下内容：

//Watch for changes to the modal-visible attribute
scope.$watch("modalVisible", function (newValue, oldValue) {
    if( newValue ) {
        scope.showModal(newValue);
    } else {
        //Update the visible value when the dialog is closed 
        //through UI actions (Ok, cancel, etc.)
        element.bind("hide.bs.modal", function () {
            scope.modalVisible = false;
            if (!scope.$$phase && !scope.$root.$$phase)
                scope.$apply();
        });
    }
});

---

指令的隔离作用域和父作用域之间的双向绑定不能与这样的常量一起使用

<modal modal-visible="false"> // false is a constant boolean value not a variable in the parent scope

并且

modal

正在使用自定义手表功能：

scope.$watch(function() {
  return element.attr('modal-visible');
}, function (newValue, oldValue) {
  scope.showModal(newValue === 'true');
});

---

但是，我会发现自定义watch函数的使用，这不是一种角度的方法，可能会导致性能问题。

我尝试取出if-else块并用代码替换它，但仍然不起作用。还有其他建议吗？注意一件简单的事情：因为隔离范围变量是双向绑定的，所以可以从指令的父范围更改它。因此，你正在看它。每次触发监视时，变量的可能值为null、undefined、true和false。现在，您可以在手表内部应用您自己的逻辑，以应对所有这些可能的情况。有道理吗？：）由于事件发生在角度之外，因此最好使用

attrs.$observe

而不是

scope.$watch

。就我个人而言，我认为在angularSort内部处理jQuery更明智。在这种情况下，父范围是什么？如果我为该指令创建了一个控制器，它会是父控制器吗？此外，您上面发布的代码并不能解决问题。当我加载页面并在$watch中登录控制台时，它会获取值。当我点击按钮时，属性会发生变化，$watch由于某种原因无法识别。太棒了！非常感谢。很抱歉我的误解，

$attr.$observe（）

不能用于这种情况。您可以使用自定义监视功能来检测属性更改，但我不建议这样做。请参阅plunker中的模态二示例。使用双向绑定，我是否也可以在指令内创建控制器，或者它必须在指令外？它必须作为应用程序控制器在指令外。指令的控制器是不同的东西，服务于不同的目的。明白了……那么有没有一种方法可以在应用程序控制器之外和指令中做到这一点？原因是需要在其他指定的元素控制器内调用modal指令

//Watch for changes to the modal-visible attribute
scope.$watch("modalVisible", function (newValue, oldValue) {
    if( newValue ) {
        scope.showModal(newValue);
    } else {
        //Update the visible value when the dialog is closed 
        //through UI actions (Ok, cancel, etc.)
        element.bind("hide.bs.modal", function () {
            scope.modalVisible = false;
            if (!scope.$$phase && !scope.$root.$$phase)
                scope.$apply();
        });
    }
});

<modal modal-visible="false"> // false is a constant boolean value not a variable in the parent scope

<button id="btn2" class="btn btn-default" ng-click="isModalVisible = true">Click Me v2</button>
<modal-two id="chartModal2" modal-title="Testing a Modal" modal-visible="isModalVisible">
  <p>Body</p>
</modal-two>

scope.$watch(function() {
  return element.attr('modal-visible');
}, function (newValue, oldValue) {
  scope.showModal(newValue === 'true');
});