Question

我正在为采购订单建立模型。

当我的视图呈现采购订单的标题时，我希望能够将该采购订单的ID传递给我为订单项构建的指令。即：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($timeout) {

  var vm = this;

  vm.po = {};

  init();

  function init() {
    $timeout(function() {
      vm.po.id = 123;
    }, 1000);
  }

});


app.directive('lineItems', LineItems);

function LineItems() {

  var directive = {
    scope: {
      poId: '@'
    },
    restrict: 'AE',
    template: '<div class="red" ng-repeat="l in vm.lineItems">{{ l || json }}</div>',
    controller: LineItemsController,
    controllerAs: 'vm'
  };
  return directive;

}

LineItemsController.$inject = ['$scope', '$q'];

function LineItemsController($scope, $q) {

  //Private
  var vm = this;

  //Properties
  vm.lineItems = [];

  //Methods

  init();

  function init() {
    // normally I would load these using a data service and the bound Id
    vm.lineItems = [{
      id: 1,
      desc: "Item1",
      poId: $scope.poId
    }, {
      id: 2,
      desc: "Item2",
      poId: $scope.poId
    }, {
      id: 3,
      desc: "Item3",
      poId: $scope.poId
    }]
  }

}

/* Put your css in here */

.red {
  background-color: red;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as vm">
  <p>Hello Purchase Order : {{ vm.po.id }}</p>

  <line-items po-Id="{{vm.po.id}}"></line-items>
</body>

</html>

初始化订单项指令时，它会加载自己的数据以显示订单项并允许进行修改。但是当我尝试这样做时，purchaseOrderId在指令试图呈现自己时从不受约束。

我采取了错误的做法吗？是否有更简单的方法来实现这一目标，并在这两个对象之间实现良好的责任分离？两者都通过单独的restful端点进行控制，但彼此之间存在关系。

编辑：我猜我需要延迟我的init，直到绑定有效的po-id？我会用手表吗？

Answer 1

定义指令时，应按如下方式设置scope属性：

scope: {
    poId: "@"
}

这样你就可以将poId绑定到具有相同名称的元素的属性（我不记得是否也会在这里发生驼峰转换，所以你应该尝试“poId”和“po-id”）; < / p>

希望这有帮助。

在angular指令中分享父子关系的正确方法

1 个答案: