Question

首先，我是一个有棱角分明的新手，所以如果问题是微不足道的原谅我，但我尝试了google和angular docs，但我找不到任何明确的例子来满足我的需求。

我正在尝试构建一个“独立”指令模块（复杂的UI控件），我希望它能够使用来自可配置服务/工厂/提供程序的数据。

我有一个演示应用程序和我的真实应用程序，每个应该有自己的dataProvider（即硬编码和REST API，我猜的相同的单元测试常见场景）。

对于使用此指令模块的应用程序，为每个指令设置不同的数据提供程序对象，这是正确的方法，因为它可能在同一个html上有多个实例，如下例所示：

<!DOCTYPE html>
<html lang="en">
<body ng-app="demo" >
   <my-directive id="first"></my-directive>
   <my-directive id="second"></my-directive>
</body>
</html>

更具体地考虑一个网格指令，它将有一个控制器来保持一些dinamically redering，处理事件或事情，如排序，分页等。但作为一个UI控件它没有数据回溯逻辑，它只是需要一些尊重界面的对象，例如“getRows”，“getPage”

我的问题是如何在我的指令的通用控制器中注入/配置dataProvider对象。

Answer 1

如果我理解你的话，你会这样做。

创建您的指令。此时，您可以通过scope属性传入数据。 =符号将提供与当前控制器中的范围变量的双向绑定。

angular.module('UI-Control', [])

.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: {
      data: '=myDirective'
    },
    link: function(scope, elem, attr) {
        console.log(data);
    }
  }
});

然后创建控制器并创建一个将传递给指令的范围变量。请务必注入独立的指令模块。

angular.module('testCtrl', ['UI-Control'])

  .controller('testCtrl', function($scope) { 
    $scope.data1 = {
      something: "Something 1",
      somethingElse: "Something Else 1"
    }
    $scope.data2 = {
      something: "Something 2",
      somethingElse: "Something Else 2"
    }
  });

现在，在您的HTML中，您可以使用传入的数据来实例化您的指令。

<body ng-app="demo" ng-controller="testCtrl">
  <my-directive="data1" id="first"></my-directive>
  <my-directive="data2" id="second"></my-directive>
</body>

AngularJs：＆＃34;独立＃34;指令和外部数据依赖

1 个答案: