相关疑难解决方法(0)

为什么replace=true还是replace=false没有在下面的代码产生任何影响？

当replace = false时,为什么不显示"某些现有内容"？

或者更谦虚地说,你能否解释一下replace=true/false指令中的功能是什么以及如何使用它？

例

JS /角:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

在Plunker中看到它:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

在本文档中:http://docs.angularjs.org/guide/directive,它表示有一个replace指令配置:

template - 将当前元素替换为HTML的内容.替换过程将所有属性/类从旧元素迁移到新元素.有关更多信息,请参阅下面的创建组件部分.

javascript代码

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML代码

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

但最后一页看起来像:

directive template1
directive template2

看来这replace不起作用.我想念什么吗？

现场演示:http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

看起来新的AngularJS 1.5 Component概念中没有"替换"选项(就像指令一样).

如果我想将表行 <TR>元素作为组件,您会建议什么？在有效的HTML方面是不可能的？

实例:mailBox组件里面有邮件组件.通过标记mail-box-component是表,而mail-box是tr.

<mail-box>
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail>
<mail-box>

UPD:关于指令的相关讨论 - 为什么在AngularJS中不推荐使用替换？

我正在创建一个<row>AngularJS指令,它需要<row>使用可以包含任何HTML代码的动态模板替换自身(执行后标记不得出现在DOM中).

使用中的问题replace: true是它不能与表的<tr>标签一起使用,并且模板是动态选择的.

所以我试图找到一种方法来替换链接函数中的元素,但没有成功.

使用jQuery的.replaceWith()休息ngRepeat原因不明.

任何提示？

这是小提琴

我正在尝试创建一个指令,允许将元素定义为可点击或不可点击,并将定义如下:

<page is-clickable="true">
    transcluded elements...
</page>

我想得到的HTML是:

<page is-clickable="true" ng-click="onHandleClick()">
    transcluded elements...
</page>

我的指令实现如下所示:

app.directive('page', function() {
    return {
        restrict: 'E',
        template: '<div ng-transclude></div>',
        transclude: true,
        link: function(scope, element, attrs) {
            var isClickable = angular.isDefined(attrs.isClickable) && scope.$eval(attrs.isClickable) === true ? true : false;

            if (isClickable) {
                attrs.$set('ngClick', 'onHandleClick()');
            }

            scope.onHandleClick = function() {
                console.log('onHandleClick');
            };
        }
    };
});

我可以看到,添加新属性后,Angular不知道ng-click,所以它不会触发.我尝试$compile在设置属性后添加一个,但它会导致无限链接/编译循环.

我知道我可以检查onHandleClick()函数内部是否isClickable值true,但我很好奇如何通过动态添加ng-click事件来实现这一点,因为我可能需要使用多个其他ng-*指令来执行此操作而我不想增加不必要的开销 有任何想法吗？

我正在使用Angular2和Semantic UI作为css库.我有这段代码:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

卡片很好地呈现在它们之间的空间.像这样:请参阅链接中的卡片部分

因为卡片代表某种视图我想到用它制作一个组件,所以现在代码是:

<div class="ui three stakable cards">
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
</div>

但现在风格破碎了,它们之间再也没有空间了.

有没有什么好办法解决这个问题？

我想做的第一件事是:

my-card-component OLD template:
<a class="ui card">
    [some junk]
</a>

           |||
           VVV

my-card-component NEW template:
[some junk]

and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>

但这并不令人满意,因为我希望能够传入一个对象并且组件会自动设置[href]=obj.link.

在AngularJS 1.0中,有一个replace: true属性可以满足我的需求,在Angular2中有类似的东西吗？

从AngularJs 1.5升级到1.6状态时,$ compile中的更改的文档:

默认情况下禁用对组件/指令控制器实例的预分配绑定,这意味着它们将不再在构造函数内可用.

- AngularJS开发人员指南 - 迁移到V1.6 - $ compile

文档中的升级示例如下(缩写):

之前

.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    //...
  }
})

后

.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    this.$onInit = function() {
      // ...
    };
  }
})

我已经发现我必须使用相同的$ onInit函数为任何使用bindToController的指令:true就像这里:

.directive('acAllocation', acAllocation);

  function acAllocation(SomeService) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        allocation: '=acAllocation'
      },
      controller: acAllocationController,
      controllerAs: 'vm',
      bindToController: true,
      templateUrl: 'path/acAllocation.html'
    };

    function acAllocationController() { …