吴模型不工作的属性指令 [英] Ng-model not working for attribute directive

问题描述

我有一个简单的控制器：

I have a simple controller:

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

和我有一个指令调用该控制器：

And I have a directive calling this controller:

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

如果我使用NG-控制器调用控制器 NG-模型工作正常。但是，如果我把它通过指令不更新视图：

If I call the controller using ng-controller the ng-model works fine. But if I call it through the directive it doesn't update the view:

<!-- 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>

编辑：我可以把它，如果我不使用隔离范围（范围的工作：在指令定义{...} ）。我只使用隔离范围，有机会获得这个属性范围：{cronosDataset：@} 我的控制器内。如果有一种不同的方式来做到这一点不使用分离的范围那么问题就解决了​​！

I can put it to work if I don't use isolated scope (scope : {...} in directive definition). I'm only using isolated scope to have access to this attribute scope: { cronosDataset : "@" } inside my controller. If there's a different way to do it without use isolated scope then problem solved!

我试图存档是重用我做了摆脱数据库实例数据的逻辑：

What I'm trying to archive is to reuse the logic I have done to get data from database Example:

<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>

在我的控制器，我去数据库（AJAX使用克洛诺斯数据集作为查询参数），并把结果早在 p 变量。所以，我需要两样东西：

In my controller I go to database (ajax using cronos-dataset as query parameter) and put the result back in p variable. So i need two things:

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

是否有意义？

下面是一个 PLUNKER

推荐答案

我分叉的 Plunker 添加Transclusion。该指令Transcludes元素，完全取代它。然后，它采用克隆（原始内容），并将其插入到Transclusion，使得原本元素成为编译为指令的一部分。

I forked your Plunker to add Transclusion. The Directive Transcludes the element, replacing it entirely. It then takes the cloned (original contents) and inserts them into the Transclusion, making the original elements become compiled as part of the directive.

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);
      });
    }
  };
}])

这篇关于吴模型不工作的属性指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！