Fatal编程技术网
  • angularjs/
  • AngularJS-从子指令访问父指令属性

AngularJS-从子指令访问父指令属性

angularjs

AngularJS-从子指令访问父指令属性,angularjs,angularjs-directive,Angularjs,Angularjs Directive,这应该不是一件很难做到的事情，但我不知道如何最好地做到这一点 我有一个父指令，如下所示： directive('editableFieldset', function () { return { restrict: 'E', scope: { model: '=' }, replace: true, transclude: true, template: ' <div class="editable-fields

这应该不是一件很难做到的事情，但我不知道如何最好地做到这一点

我有一个父指令，如下所示：

directive('editableFieldset', function () {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    replace: true,
    transclude: true,

    template: '
      <div class="editable-fieldset" ng-click="edit()">
        <div ng-transclude></div>

        ...

      </div>',

    controller: ['$scope', function ($scope) {
      $scope.edit = ->
        $scope.editing = true

       // ...
    ]
  };
});
其思想是在默认情况下显示一组字段。如果单击，它们将成为输入并可以编辑。

从中汲取灵感，我找到了一个可行的解决方案

我不得不改变很多。我选择在
editableString
上也有一个独立的作用域，因为它更容易将正确的值绑定到模板。否则，您将不得不使用
编译
或其他方法（如
$transclude
服务）

结果如下：

JS:

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {

  $scope.myModel = { property1: 'hello1', property2: 'hello2' }

});


myApp.directive('editableFieldset', function () {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    transclude: true,
    replace: true,
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>',
    link: function(scope, element) {
      scope.edit = function() {

        scope.editing = true;
      }
    },
    controller: ['$scope', function($scope) {

      this.getModel = function() {
        return $scope.model;
      }

    }]
  };
});

myApp.directive('editableString', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      label: '@',
      field: '@'
    },
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',
    require: '^editableFieldset',
    link: function(scope, element, attrs, ctrl) {

      scope.model = ctrl.getModel();
    }
  };
});

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <editable-fieldset model="myModel">
      <editable-string label="Some Property1:" field="property1"></editable-string>
      <editable-string label="Some Property2:" field="property2"></editable-string>
    </editable-fieldset>
  </body>

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'Ctrl'，函数（$scope）{
$scope.myModel={property1:'hello1'，property2:'hello2'}
});
myApp.directive（'editableFieldset'，函数（）{
返回{
限制：'E'，
范围：{
型号：'='
},
是的，
替换：正确，
模板：“”，
链接：功能（范围、元素）{
scope.edit=函数（）{
scope.editing=true；
}
},
控制器：['$scope'，函数（$scope）{
this.getModel=函数（）{
返回$scope.model；
}
}]
};
});
myApp.directive（'editableString'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
标签：“@”，
字段：'@'
},
模板：{{label}}{{model[field]}}
，
要求：“^editableFieldset”，
链接：函数（范围、元素、属性、ctrl）{
scope.model=ctrl.getModel（）；
}
};
});
HTML:

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {

  $scope.myModel = { property1: 'hello1', property2: 'hello2' }

});


myApp.directive('editableFieldset', function () {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    transclude: true,
    replace: true,
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>',
    link: function(scope, element) {
      scope.edit = function() {

        scope.editing = true;
      }
    },
    controller: ['$scope', function($scope) {

      this.getModel = function() {
        return $scope.model;
      }

    }]
  };
});

myApp.directive('editableString', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      label: '@',
      field: '@'
    },
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',
    require: '^editableFieldset',
    link: function(scope, element, attrs, ctrl) {

      scope.model = ctrl.getModel();
    }
  };
});

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <editable-fieldset model="myModel">
      <editable-string label="Some Property1:" field="property1"></editable-string>
      <editable-string label="Some Property2:" field="property2"></editable-string>
    </editable-fieldset>
  </body>


你好，普朗克！
您可以通过在子指令链接函数中传递属性来访问父控制器

link: function (scope, element, attrs, parentCtrl) {
    parentCtrl.$scope.editing = true;
}
你能举例说明最终的标记是什么样的吗？谢谢。但这对访问动态属性（如
编辑
）并没有真正的帮助。我想我必须在我的child指令中使用
$watch
来跟踪这一点？另外，我认为对于像
字段
和
标签
这样的常量不变属性，将它们传递给生成模板的函数要比将它们作为绑定添加更快？没有必要在每个摘要周期中浪费时间检查那些不会更改的绑定，对吗？编辑子对象的属性不是吗？还是一次只编辑一个子项？我希望一次编辑所有子项。编辑是父项的一个属性，我希望子项能够读取并根据其值更改其状态。是的，子项中有某种类型的
$watch
。可能通过父控制器公开。如果您：。。。要求：“^parentCtrl”是，该概念在指令文档中的“创建通信指令”一节中解释