Javascript 如何定义包含方法且可通过“ng click”调用的角度指令？

我想定义一个指令，它将显示第一个子元素，它首先包含一个按钮。如果我们点击按钮，第二个孩子将取代第一个孩子

HTML:

问题是当我点击按钮时，什么也没有发生。我试了很多，但仍然没有成功

您可以在此处看到现场演示：

---

如何修复它？

我将采用自定义组件方法

角度模块（“应用程序”，[]） .directive（“showMore”，function（）{ 返回{ 限制：'E'， 作用域：{}， 是的， 模板：“{{title}}”， 控制器：功能（$scope）{ var self=这个； $scope.title=“显示更多”； $scope.toggle=function（）{ self.short.show=！self.short.show； self.full.show=！self.full.show； $scope.title=self.short.show？“显示更多”：“显示更少”； }; this.addShort=函数（short）{ self.short=short； }; this.addFull=函数（完整）{ self.full=full； }; } }; }) .指令（“短”，函数（）{ 返回{ 限制：'E'， 作用域：{}， 要求：“^showMore”， 是的， 模板：“”， 链接：函数（范围、元素、属性、showMoreCtrl）{ scope.show=true； showMoreCtrl.addShort（范围）； } }; }) .指令（“完整”，函数（）{ 返回{ 限制：'E'， 作用域：{}， 要求：“^showMore”， 是的， 模板：“”， 链接：函数（范围、元素、属性、showMoreCtrl）{ scope.show=false； showMoreCtrl.addFull（范围）； } }; });

短的
满的

由于要更改指令的

元素的DOM，因此需要重新编译
$compile
元素，如下所示：

.directive("showMore", function($compile) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs) {

      var children = element.children();
      var short = children[0];
      var full = children[1];

      element.empty().append(short);
      $compile(element.contents())(scope);

      scope.showMore = function() {
        element.empty().append(full);
      };

    }
  };
});

问题是您的指令创建了新的隔离作用域，但ng click指令被放置在另一个作用域中的元素上。
我将通过2个指令实现您的需求，一个指令取决于另一个指令


角度模块（“应用程序”，[]）
.directive（“showMoreWrapper”，函数（）{
返回{
限制：“A”，
作用域：{}，
控制器：函数（$element）{
this.showMore=函数（）{
var children=$element.children（）；
children.eq（0.hide（）；
children.eq（1.show（）；
};
},
链接：函数（范围、元素、属性）{
var children=element.children（）；
儿童。情商（1）。隐藏（）；
}
};
})
.directive（“showMore”，function（）{
返回{
限制：“A”，
要求：“^showMoreWrapper”，
链接：函数（作用域、元素、属性、showMoreWrapper）{
元素上（'click'，showMoreWrapper.showMore）；
}
};
});

短的
单击我以显示更多信息
满的

angular.module("app", [])
.directive("showMore", function() {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs) {

      var children = element.children();
      var short = children[0];
      var full = children[1];

      element.empty().append(short);

      scope.showMore = function() {
        element.empty().append(full);
      };

    }
  };
});

.directive("showMore", function($compile) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs) {

      var children = element.children();
      var short = children[0];
      var full = children[1];

      element.empty().append(short);
      $compile(element.contents())(scope);

      scope.showMore = function() {
        element.empty().append(full);
      };

    }
  };
});