HTML

Question

我正在尝试对指令进行双向绑定。

我不能在指令上使用scope（元素上的多个指令），所以我必须在compile(){...}函数中使用

到目前为止，这是该指令的简化版本：

.directive('myDialog', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-dialog.html',
        compile: function(tElement, tAttrs, transclude) {
          return function($scope, $element, $attributes) {
            $scope.label = $scope.$eval($attributes.label);

            // when I set the label on something this should update the parent
            $scope.label = "test";
          }
        }
      };

那么我如何能够在我的指令中更改标签时更新主应用程序中的值，反之亦然

用于测试的Plunker： http://plnkr.co/edit/lARCrGD5FsnOWQZrahIl?p=preview

更新：这是实际的设置，其中包含了我想要实现的所有逻辑：http://codepen.io/cskiwi/pen/eJryqK?editors=1010

在第101行，我想将测试值设置为true，稍后我将设置为在该指令之外测试var on false

UPDATE2 ：得到了一些东西，这可能是值得关注的东西：

  return {
        restrict: "A",
        require: ["^mdChips", "^chipBar"],
        controller: "chipBarController",
        controllerAs: "chipBarController",
        bindToController: {
            activated: "="
        },
        // rest of the code

这允许在指令中将激活的var设置为true;但现在我无法将appCtrl中的值设置为false

Answer 1

她是一名有数据绑定功能的人 http://plnkr.co/edit/qtfEPfbNTZHHUEBhGYye?p=preview

网上有很多详细阅读

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

http://www.bennadel.com/blog/2726-isolate-scope-two-way-data-binding-is-eventually-consistent-in-angularjs.htm ...

您应该为指令创建一个范围变量，让指令知道哪个变量绑定一个

HTML

  <div ng-controller="Controller">
    {{email}} &lt;== should become test on launch

    <my-dialog email="email"></my-dialog>

    <button ng-click="click()">click</button>  &lt;== should turn both in tst
  </div>

template my-dialog.html

<div class="alert">
      email is :- {{email}}!
</div>

JS

  angular.module('docsTransclusionExample', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.email = 'tobias@gmail.com';

      $scope.click = function(){
        $scope.email = "tst";
      }
  }])
  .directive('myDialog', function() {
      return {
        restrict: 'E',
        scope : { // this create an isolated scope
           email:'='   // the email attribute is binded two way with '=', there is also '@' and '&'
        },
        templateUrl: 'my-dialog.html'

      };
    });

Answer 2

我同意讽刺说你可能有一个设计问题，但是会给你一种方法来做你想做的事。

使用ng-model指令和控制器，然后您可以读取/观察更改/更改值：）

请参阅此处的教程：https://www.nadeau.tv/using-ngmodelcontroller-with-custom-directives/

编辑：如果你能使用正确的绑定，我有一个相当肮脏和棘手的方法：基于此文档：https://docs.angularjs.org/api/ng/function/angular.element

添加一个属性，该属性将包含字段路径作为控制器范围中的字符串（a.b.c，如果它在$ scope.a.b.c中），就像这样

使用angular.element（）获取指令的父元素，并使用scope方法（在文档中）获取其范围。然后调用$ eval方法，如果这个范围像这样读取theScope。$ eval（attrs.fieldsPath）;使用$ eval你也应该能够用theScope更新值。$ eval（attrs.fieldsPath + =＆＃39; myValue＆＃39;）。如果它无法正常工作，则必须将字符串拆分为＆＃39;。＆＃39;并浏览范围对象以在右侧字段上书写。

var value = $scope;
var tab  = attrs.fieldPath.split('.');
for(i = 0; i < tab.length && value; i++){
    value = value[tab[i]];
}

Answer 3

update2实际上正在解决这个问题。

    controllerAs: "chipBarController",
    bindToController: {
        activated: "="
    },

做了所需的一切，

我的代码中只有一个拼写错误

感谢所有帮助过的人，特别是@Claies

Angular指令绑定

3 个答案:

HTML

template my-dialog.html

JS