Question

我的指令包含此模板：

return {
    require: 'ngModel',
    replace: true,
    scope: {
        ngModel: '=',
        pid: '=pid'
    },
    template: '<div class="pagedown-bootstrap-editor"></div>',
    link: function (scope, iElement, attrs, ngModel) {

        var newElement = $compile(
            '<div>' +
               '<div class="wmd-panel">' +
                  '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                  '<textarea data-ng-hide="modal.showPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
                  '</textarea>' +
               '</div>' +
               '<div data-ng-show="modal.showPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview"></div>' +
            '</div>')(scope);

在同一页面上，我有一个这样的按钮：

<button data-ng-mouseover="modal.showPreview = true">Preview</button>
{{ modal.showPreview }}

我已添加到模板中：data-ng-hide="modal.showPreview == true"和data-ng-show="modal.showPreview == true"

当我将鼠标悬停在按钮上时，我可以看到modal.showPreview的值更改为True。但是，模板中的div没有任何反应。我怎样才能使模板中的div识别出我在<button>上空盘旋？

Answer 1

在注入模板内容后，您需要重新绑定onclick事件

Answer 2

我认为你不需要ngModelController，它有不同的目的。它主要用于从您的指令更新模型。

控制器包含用于数据绑定，验证，CSS更新以及值格式化和解析的服务。它故意不包含任何处理DOM呈现或侦听DOM事件的逻辑。这种与DOM相关的逻辑应该由其他指令提供，这些指令使用NgModelController进行数据绑定。

请参阅this plunker，其中我为inherited scope和isolated scope创建了两个示例。如果你使用

，在你的指令中

scope:{
    modal: '=myDirectiveWithconfig'
  }

它会创建isolated scope。对于isolated scope，您应该在控制器中定义modal.showPreview并告诉指令<div my-directive-withconfig='modal'></div>使用此值。

对于inherited scope，您无需告诉指令<div my-directive></div>它将获得匹配值。

Answer 3

由于您正在创建隔离范围，因此在隔离范围上添加变量以跟踪showPreview

  scope: {
        ngModel: '=',
        pid: '=pid'
        showPreview:'='
    },

在您的指令用法中执行类似

的操作

<my-directive show-preview='modal.showPreview' ...></my-directive>

如何在模板中显示或隐藏<div>，具体取决于按钮鼠标悬停？</div>

3 个答案: