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>

我想，我的指令中的模型字段会自动更新。但我看到＆＃34;默认文字＆＃34;总是在指令内部并在控制器内部更改我怎么绑它？

Answer 1

您必须添加服务以在控制器之间保留信息。控制器总是按照＆＃34; view＆＃34;所以你的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>

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

1 个答案: