Question

我有一个名为styledCheckbox的指令。它看起来像这样：

directive('styledCheckbox', function($timeout){
    return {
      restrict: 'A',
      templateUrl: 'checkbox.html',
      replace:true,
      transclude: 'element',
      scope:false
    };
});

这很简单。它需要一个输入元素并将其插入到一些预先形成的HTML中。

<span class="checkbox">
  <ng-transclude></ng-transclude>
  <div class="checkbox-overlay">
    <div class="checkbox-overlay-inner-content">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 19">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.3 11.14L20.26 0 24 3.86 9.27 19 0 9.53l3.81-3.9z"></path>
      </svg>
    </div>
  </div>
</span>

所以，我的index.html文件如下所示：

<body ng-controller="test">
  <input styled-checkbox name="{{option.name}}" ng-model="option.value" type="checkbox"/>
</body>

变成......

<span class="checkbox">
  <ng-transclude>
    <input styled-checkbox name="{{option.name}}" ng-model="option.value" type="checkbox"/>
  </ng-transclude>
  <div class="checkbox-overlay">
    <div class="checkbox-overlay-inner-content">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 19">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.3 11.14L20.26 0 24 3.86 9.27 19 0 9.53l3.81-3.9z"></path>
      </svg>
    </div>
  </div>
</span>

太棒了......但这就是问题所在。单击该复选框时，我的控制器中的选项对象不会更新以反映该更改。就好像我的输入元素现在有自己独立的范围。

现在......这是奇怪的部分。当我切换我的指令时：

 directive('styledCheckbox', function($timeout){
    return {
      restrict: 'E',
      templateUrl: 'checkbox.html',
      replace:false,
      transclude: true,
      scope:false
    };
});

将我的HTML更改为此...

<body ng-controller="test">
  <div styled-checkbox>
    <input name="{{option.name}}" ng-model="option.value" type="checkbox"/>
  </div>
</body>

突然间一切正常。检查和取消选中我的输入元素会反映在控制器的范围内。那么为什么会这样呢？我该如何解决呢？我已经在网上搜索高低，我找不到任何详细说明此类问题的内容。

Answer 1

您的问题是您在第一个实例中错误地使用了transclude。 1.）＆＃34;这是我的指令定义＆＃34;

directive('styledCheckbox', function($timeout){
    return {
      restrict: 'A',
      templateUrl: 'checkbox.html',
      replace:true,
      transclude: 'element',
      scope:false
    };
});

2。）＆＃34;现在将它放在页面上并将其转换为＆＃34; Transclude获取指令实例中的所有元素，并将它们放在指令定义中的标记内。你的错误在于你没有在元素中放置任何元素，所以没有任何东西被正确地转换。

<input styled-checkbox name="{{option.name}}" ng-model="option.value" type="checkbox"/>

3。）当您将属性移动到外部div时，您说＆＃34;将此div中的所有元素放入＆＃34; styledCheckbox＆＃34;的元素中。指示。

  <div styled-checkbox>
    <input name="{{option.name}}" ng-model="option.value" type="checkbox"/>
  </div>

有关进一步说明，请wonderful answer

编辑：修复精彩答案链接

Transclude：Element＆amp;范围

1 个答案: