Question

我有一个JSBin here与我正在尝试做的事情。我有一个控制器和一个指令（它们是兄弟姐妹）。

控制器我想跟踪几个复选框的状态，并且我想用复选框填充div的指令（在我的实际应用程序中，指令处理大约十几个不同模板的显示）。复选框的状态保存在服务中，该服务将在应用程序的不同部分再次访问。

由于我想维护'controller as'语法而不是将所有内容都转储到$scope，因此我很难绕过指令使用控制器范围。

最好将复选框切换到指令中，或者是否有某种方法将控制器范围包含在指令中？我试过使用scope指令选项没有成功。

编辑：从JSBin发布代码：

HTML：

<!DOCTYPE html>

<html ng-app='MyApp'>

  <head>
    <script src='https://code.angularjs.org/1.3.1/angular.js'></script>
    <script src='http://code.angularjs.org/1.3.1/angular-sanitize.js'></script>
    <script src='data-service.js'></script>
    <script src='my-app.js'></script>
    <script src='my-directives.js'></script>
  </head>

  <body ng-controller='MyController as myCtrl'>
    <div checkbox-template=''></div>
    Checked boxes: <div ng-repeat='checked in data.checkboxes'>{{checked}}</div>
  </body>

</html>

JavaScript的：

MY-directives.js

dir = angular.module('my-directives', []);

dir.directive('checkboxTemplate', function(){
  return {
    restrict: 'A',
    template: "<ul><li ng-repeat='cb in data.tpl1' ng-bind-html='myCtrl.renderHtml(cb)'></ul>"
  };
});

数据service.js：

dat = angular.module('data-service', []);

dat.service('DataService', function() {
  return {
    checkboxes: [],
    tpl1: [
        "<label><input type='checkbox' value='1' ng-click='boxToggle(1)' ng-checked='data.checkboxes.indexOf(1) > -1'/>Checkbox 1</label>",
        "<label><input type='checkbox' value='2' ng-click='boxToggle(2)' ng-checked='data.checkboxes.indexOf(2) > -1'/>Checkbox 2</label>"
      ]
  };
});

MY-app.js：

app = angular.module('MyApp', ['ngSanitize', 'my-directives', 'data-service']);

app.controller('MyController', ['$scope', '$sce', 'DataService', function($scope, $sce, DataService) {
  this.data = DataService;
  self = this;

  this.renderHtml = function(raw_html){
    return $sce.trustAsHtml(raw_html);
  };

  this.boxToggle = function(idx) {
    i = this.data.checkboxes.indexOf(idx);
    alert('Toggling Checkbox');

    if (i > -1) {
      this.data.checkboxes.splice(i,1);
    } else {
      this.data.checkboxes.push(idx);
    }
  };
}]);

Answer 1

您希望在指令中使用& scope option，以允许它调用父作用域中定义的函数。

angularjs在指令中使用控制器范围

1 个答案: