帶綁定的AngularJS控制器內部指令

Question

我的指令有以下簡單代碼：

app.directive('ngModal', function ($parse) {
  return {
    restrict: 'E',
    template: document.getElementById('ng-modal').innerHTML,
    replace: true,
    controller : "@",
    name:"controllerName",
  }
})

<ng-modal controller-name="ModalCtrl"></ng-modal>

這是我的控制器：

app.controller('ModalCtrl', ['$scope', function ($scope) {
  $scope.model = 'default text'
}])

<div ng-controller="ModalCtrl">
  <input type="text" ng-model="model">
</div>

我想要，我指令中的模型字段將自動更新。 但是我總是在指令內部看到“默認文本”，並在控制器內部對其進行了更改。 如何綁定它？

Answer 1

您必須添加服務以保留控制器之間的信息。 控制器始終按“視圖”創建，因此您的ng-modal和div使用不同的控制器，這就是為什么模型數據不會在它們之間更新的原因。

快速示例：

app.service('sharedData', function() {
  var sharedData = {
    field: 'default text'
  };

  return sharedData;
});

app.directive('ngModal', function () {
  return {
    restrict: 'E',
    template: '',
    replace: true,
    controller : "@",
    name:"controllerName",
  }
});

app.controller('ModalCtrl', ['$scope', 'sharedData', function ($scope, sharedData) {
  $scope.model = sharedData;
}]);

<ng-modal controller-name="ModalCtrl">{{model.field}}</ng-modal>

<div ng-controller="ModalCtrl">
  <input type="text" ng-model="model.field">
</div>