Question

我正在尝试编辑这位绅士小提琴（http://jsfiddle.net/Wijmo/ywUYQ/），以便在窗格中添加ng-click功能。

我的目标是在窗格指令中添加一个ng-click函数，这样当单击它时，指定的操作就会运行。

示例：

<tabs>
    <pane ng-repeat="candy in candies" title="Tasty {{candy.name}}" ng-click="addChocolate(candy)">
</tabs>

您将在代码段中看到窗格指令通过在标签的控制器中添加 addPane 来添加自身＆＃39;窗格列表。标签指令负责处理点击事件并显示正确的窗格。那么.....任何想法？

这是一个小提琴片中的片段：

＆＃13;

angular.module('components', [])
  .directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: ["$scope",
        function($scope) {
          var panes = $scope.panes = [];

          $scope.select = function(pane) {
            angular.forEach(panes, function(pane) {
              pane.selected = false;
            });
            pane.selected = true;
          }

          this.addPane = function(pane) {
            if (panes.length == 0) $scope.select(pane);
            panes.push(pane);
          }
        }
      ],
      template: '<div class="tabbable">' +
        '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
        '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
        '</ul>' +
        '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  })
  .directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
  })

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="components">
  <h3>BootStrap Tab Component</h3>
  <tabs>
    <pane title="First Tab">
      <div>This is the content of the first tab.</div>
    </pane>
    <pane title="Second Tab">
      <div>This is the content of the second tab.</div>
    </pane>
  </tabs>
</body>

＆＃13;

Answer 1

当您的指令返回窗格的HTML时，Angular不会编译ng-click=...。您可以使用$compile服务来编译窗格指令的输出HTML，以便Angular可以将您的回调注册为onclick事件的处理程序。

输出HTML将在链接函数中按如下方式处理：$compile(html)(scope)。

Answer 2

您可以尝试这样的事情：

<Setter Property="HorizontalAlignment" Value="Center"/>

使用angular指令作为自定义指令的属性

2 个答案: