4

普朗克

我有一个外部控制器，它在其视图中包含一个指令。该指令获取流程点列表并生成链接，您可以在其中选择每个链接。它在链接功能中正确设置了 HTML，但链接的 ng-click 操作不起作用。

有任何想法吗？:)

非 Plunkering 代码

HTML

<!DOCTYPE html>
<html>

  <head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="widget">
      <process stages="production" at="productionAt"></process>
    </div>
  </body>

</html>

JS

angular.module('app', ['app.directives', 'app.controllers']);

angular.module('app.controllers', [])
 .controller('widget', function($scope) {
    var selectStage = function () {
      alert(this.label + " selected.");
      $scope.processAt = this;
    }

    $scope.production = [
        {label: "Starting", select: selectStage}
      , {label: "Fermenting", select: selectStage}
      , {label: "Pouring",     select: selectStage}
      , {label: "Beer!",  select: selectStage}
    ];

    $scope.productionAt = $scope.production[0];
 });

angular.module('app.directives', [])
 .directive('process', function() {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
      , link: function postLink(scope, element, attrs) {
          for (var i = 0; i < scope.stages.length; i++) {
            var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
            if (scope.at == scope.stages[i]) {
              $stage.addClass('active');
            }
            $(element).append($stage);
          }
        }
    }
  });
4

2 回答 2

8

为了使ng-click指令工作，它需要首先由角度基础设施处理（'编译'），所以不要在指令中手动创建li关于哪个角度不知道它们存在的元素，您可以ng-repeat在指令模板中使用如下（无需手动创建 DOM 元素）：

angular.module('app.directives', [])
 .directive('process', function() {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"><li ng-class="{active: stage==at}" ng-click="stage.select()" ng-repeat="stage in stages"><a>{{stage.label}}</a></li></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
    }
  });

修改后的 plunker：http ://plnkr.co/edit/SW1Ph0nIjVYW3UzixtBx?p=preview

我认为这是最优雅的解决方案。当然，您可以将模板移动到永恒文件并通过templateUrl.

或者，您可以在手动$compile添加项目后在元素上使用服务，li但感觉就像是 hack。

于 2013-08-03T08:09:49.477 回答
2

工作网址http://plnkr.co/edit/3zuDuQDjhA5UY5nLD09Z?p=preview

请在 url 指令中进行以下更改

angular.module('app.directives', [])
 .directive('process', function($compile) {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
      , link: function postLink(scope, element, attrs) {
          for (var i = 0; i < scope.stages.length; i++) {
            var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
            if (scope.at == scope.stages[i]) {
              $stage.addClass('active');
            }
            $(element).append($stage);
            $compile($(element))(scope);
          }
        }
    }
  });

我注入了 $complie 并添加了一行 $compile($(element))(scope);

于 2013-08-03T08:02:37.963 回答