Question

我有一个简单的控制器：

.controller("TestController",['$scope', function($scope) {
    this.p = {};
    this.p.name = "Foo";
    this.p.surname = "Bar";
}]);

我有一个指令叫这个控制器：

app.directive('cronosDataset',[function() {
  return {
    restrict: 'A',
    controller:'TestController',
    controllerAs: "ctrl",
    scope: {
        cronosDataset : "@"
    }
  };
}])

如果我使用ng-controller调用控制器，ng-model工作正常。但是，如果我通过指令调用它，它不会更新视图：

<!-- This works -->
Works
<br/>
<div class="sideMenu">
  <form ng-controller="TestController as ctrl">
      Name: <input type="text" ng-model="ctrl.p.name" />
      Surname: <input type="text" ng-model="ctrl.p.surname" />
  </form>
</div>

<!-- This one doesn't work -->
Doesn't work
<br/>
<div class="sideMenu">
  <form cronos-dataset="People">
      Name2: <input type="text" ng-model="ctrl.p.name" />
      Surname2: <input type="text" ng-model="ctrl.p.surname" />
  </form>
</div>

编辑：如果我没有在指令定义中使用隔离范围（scope : {...}），我可以将其投入使用。我只使用隔离范围来访问控制器内的此属性scope: { cronosDataset : "@" }。如果在不使用隔离范围的情况下采用不同的方式，那么问题就解决了！

我尝试归档的是重用我从数据库中获取数据的逻辑示例：

<form cronos-dataset="People"><input type="text" ng-model="p.name" /></form>
<form cronos-dataset="Car"><input type="text" ng-model="p.model" /></form>
<form cronos-dataset="Address"><input type="text" ng-model="p.street" /></form>

在我的控制器中，我转到database（使用cronos-dataset作为查询参数的ajax）并将结果放回p变量中。所以我需要两件事：

1 - Have access to attribute inside the controller
2 - Update the ng-model with a scope variable

有意义吗？

这是PLUNKER

Answer 1

我将Plunker分叉以添加Transclusion。指令转换元素，完全取代它。然后它将克隆（原始内容）并将它们插入到Transclusion中，使原始元素成为指令的一部分。

app.directive('cronosDataset',[function() {
  return {
    restrict: 'A',
    controller:'TestController',
    controllerAs: "ctrl",
    scope: {
        cronosDataset : "@"
    },
    transclude: 'element',
    replace: true,
    link: function(scope, elem, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
        elem.after(clone);
      });
    }
  };
}])

Ng模型不适用于属性指令

1 个答案: