带绑定的AngularJS控制器内部指令

我的指令中有一个简单的代码：

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>

---

我希望，指令中的模型字段将自动更新。但我看到默认文本总是在指令内，并且在控制器内更改。如何绑定它？

您必须添加一个服务以在控制器之间保存信息。始终为每个视图创建控制器，因此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>