Angularjs：与儿童指令设置父指令范围值 [英] Angularjs: set parent directive scope value with child directive

问题描述

我不知道这是做到这一点的方式，但我的目标是：

• 我有一个父指令


• 在父母的指令的块，我有一个孩子的指令，将获得来自用户
某些输入

• 儿童指令将设置在父指令的范围值


• 我可以把它从那里

当然，问题是，父母与子女指令是兄弟姐妹。所以，我不知道如何做到这一点。注 - 我不想设置在数据

小提琴： http://jsfiddle.net/rrosen326/CZWS4/

HTML

 ＆LT; D​​IV NG控制器=parentController＆GT;
    ＆LT;家长DIR DIR-数据=显示此数据＆GT;
        ＆LT;儿童DIR＆GT;＆LT; /儿童DIR＆GT;
    ＆LT; /父目录＆GT;
＆LT; / DIV＆GT;
 

的JavaScript

  VAR testapp = angular.module（'testapp'，[]）;testapp.controller（'parentController'，['$范围，$窗口'，函数（$范围，$窗口）{
    的console.log（'parentController范围ID ='$ $范围ID）;
    $ scope.ctrl_data =无关CTRL数据;
}]）;testapp.directive（'parentDir'，函数厂（）{
    返回{
        限制：ECA，
        范围： {
            ctrl_data：'@'
        }，
        模板：'＆LT; D​​IV＆GT;＆LT; B＆GT; parentDir scope.dirData：LT; / B＆GT; {{dirData}}＆LT; D​​IV CLASS =误差1NG-transclude＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;，
        更换：假的，
        transclude：真实，
        链接：功能（范围，元素，ATTRS）{
            scope.dirData = attrs.dirData;
            的console.log（parent_dir范围：，范围的$ id）;
        }
    };
}）;testapp.directive（'childDir'，函数厂（）{
    返回{
        限制：ECA，
        模板：'＆LT; H4＆GT;开始孩子指令和LT; / H4＆GT;＆LT;输入类型=文本NG模型=dirData/＆GT;＆LT; / BR＆GT;＆LT; D​​IV＆GT;＆LT; B＆GT; childDir scope.dirData： ＆LT; / b＆GT; {{dirData}}＆LT; / DIV＆GT;，
        更换：假的，
        transclude：假的，
        链接：功能（范围，元素，ATTRS）{
            的console.log（child_dir范围：，范围的$ id）;
            scope.dirData =不，这数据！ //默认文本
        }
    };
}）;
 

解决方案

如果你想要的类型的通信，需要在指导孩子使用要求。这将需要父控制器所以你需要一个控制器那里的功能你想要孩子的指令来使用。

例如：

  app.directive（父，函数（）{
  返回{
    限制：'E'，
    transclude：真实，
    模板：'＆LT; D​​IV＆GT; {{}信息}＆LT;跨度NG-transclude＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT;，
    控制器：函数（$范围）{
      $ scope.message =原始父消息      this.setMessage =功能（消息）{
        $ scope.message =消息;
      }
    }
  }
}）;
 

该控制器具有在 $范围的消息，你必须改变它的方法。

为什么之一 $范围和一个使用

这个？您无法访问在子指令中的 $范围，所以你需要使用这个中的功能，所以你孩子的指令就能够调用它。

  app.directive（'孩子'，函数（$超时）{
  返回{
    限制：'E'，
    要求：'^父母，
    链接：功能（范围，ELEM，ATTRS，parentCtrl）{
      $超时（函数（）{
        parentCtrl.setMessage（我孩子！）
      }，3000）
    }
  }
}）
 

正如所看到的，链路接收与parentCtrl第四参数（或者如果有多于一个的阵列）。在这里，我们只是等待3秒钟，直到我们叫我们在父控制器定义的方法来改变它的消息。

看到它住在这里：<一href=\"http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=$p$pview\">http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=$p$pview

I'm not sure this is the way to do this, but my goal is the following:

• I have a parent directive
• Inside the parent directive's block, I have a child directive that will get some input from the user
• The child directive will set a value in the parent directive's scope
• I can take it from there

Of course the problem is that the parent and child directives are siblings. So I don't know how to do this. Note - I do not want to set data in the

Fiddle: http://jsfiddle.net/rrosen326/CZWS4/

html:

<div ng-controller="parentController">
    <parent-dir dir-data="display this data">
        <child-dir></child-dir>
    </parent-dir>
</div>

Javascript

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

testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {
    console.log('parentController scope id = ', $scope.$id);
    $scope.ctrl_data = "irrelevant ctrl data";
}]);

testapp.directive('parentDir', function factory() {
    return {
        restrict: 'ECA',
        scope: {
            ctrl_data: '@'
        },
        template: '<div><b>parentDir scope.dirData:</b> {{dirData}} <div class="offset1" ng-transclude></div> </div>',
        replace: false,
        transclude: true,
        link: function (scope, element, attrs) {
            scope.dirData = attrs.dirData;
            console.log("parent_dir scope: ", scope.$id);
        }
    };
});

testapp.directive('childDir', function factory() {
    return {
        restrict: 'ECA',
        template: '<h4>Begin child directive</h4><input type="text"  ng-model="dirData" /></br><div><b>childDir scope.dirData:</b> {{dirData}}</div>',
        replace: false,
        transclude: false,
        link: function (scope, element, attrs) {
            console.log("child_dir scope: ", scope.$id);
            scope.dirData = "No, THIS data!"; // default text
        }
    };
});

解决方案

If you want that kind of communication, you need to use require in the child directive. That will require the parent controller so you need a controller there with the functionality you want the children directives to use.

For example:

app.directive('parent', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>{{message}}<span ng-transclude></span></div>',
    controller: function($scope) {
      $scope.message = "Original parent message"

      this.setMessage = function(message) {
        $scope.message = message;
      }
    }
  }
});

The controller has a message in the $scope and you have a method to change it.

Why one in $scope and one using this? You can't access the $scope in the child directive, so you need to use this in the function so your child directive will be able to call it.

app.directive('child', function($timeout) {
  return {
    restrict: 'E',
    require: '^parent',
    link: function(scope, elem, attrs, parentCtrl) {
      $timeout(function() {
        parentCtrl.setMessage('I am the child!')
      }, 3000)
    }
  }
})

As you see, the link receives a fourth param with the parentCtrl (or if there is more than one, an array). Here we just wait 3 seconds until we call that method we defined in the parent controller to change its message.

See it live here: http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=preview

这篇关于Angularjs：与儿童指令设置父指令范围值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！