Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 在转移指令中访问父作用域_Angularjs_Angularjs Directive_Angularjs Scope - Fatal编程技术网

Angularjs 在转移指令中访问父作用域

Angularjs 在转移指令中访问父作用域,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我想访问父指令的作用域,但似乎无法获得正确的设置组合。这可能吗?这是正确的方法吗 我真的不想在MyCtrl中放一些类似于_CONST的东西(这将帮助我通过控制流进行DOM更新) <div ng-controller="MyCtrl"> <parent> <child></child> </parent> </div> var myApp = angular.module('myApp',[]

我想访问父指令的作用域,但似乎无法获得正确的设置组合。这可能吗?这是正确的方法吗

我真的不想在MyCtrl中放一些类似于_CONST的东西(这将帮助我通过控制流进行DOM更新)

<div ng-controller="MyCtrl">
    <parent>
        <child></child>
    </parent>
</div>

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

function MyCtrl($scope) {
    $scope.obj = {prop:'foo'};
}

myApp.directive('parent', function() {
    return {
        scope: true,
        transclude: true,
        restrict: 'EA',
        template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
        link: function(scope, elem, attrs) {
            scope.SOME_CONST = 'someConst';
        }
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{SOME_CONST}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});

var myApp=angular.module('myApp',[]);
函数MyCtrl($scope){
$scope.obj={prop:'foo'};
}
myApp.directive('parent',function(){
返回{
范围:正确,
是的,
限制:“EA”,
模板:“我是家长{{obj.prop}}”,
链接:功能(范围、要素、属性){
scope.SOME_CONST='someConst';
}
}
});
myApp.directive('child',function(){
返回{
限制:“EA”,
模板:“我是孩子……我想访问我父母的东西,但我不能。我可以访问MyCtrlScope,请看{{obj.prop}}我如何访问我父母的链接函数中的SOME_CONST值?这是个好主意吗?{{SOME_CONST}。我真的不想把所有东西都放在MyCtrl'中,
}
});
请看这个


感谢

通常,您访问指令中父作用域变量的方式是通过双向绑定(指令配置中的
作用域:{model:'=model'}
-see),但由于您使用的是转换,因此这并不是那么简单。如果子指令始终是父指令的子指令,则可以将其配置为需要父指令,然后在子链接功能中访问父控制器:

myApp.directive('parent',function(){
返回{
范围:正确,
是的,
限制:“EA”,
模板:“我是家长{{obj.prop}}”,
控制器:功能($scope){
$scope.SOME_CONST='someConst';
this.SOME_CONST=$scope.SOME_CONST;
}
}
});
myApp.directive('child',function(){
返回{
限制:“EA”,
要求:“^parent”,
范围:正确,
链接:函数(作用域、元素、属性、parentCtrl){
scope.SOME_CONST=parentCtrl.SOME_CONST;
},
模板:“我是孩子……我想访问我父母的东西,但我不能。我可以访问MyCtrlScope,请看{{obj.prop}}我如何访问我父母的链接函数中的SOME_CONST值?这是个好主意吗?{{SOME_CONST}。我真的不想把所有东西都放在MyCtrl'中,
}
});

请参阅此更新:

使用
transclude:true
scope:true
parent
指令创建两个新的作用域:

范围004是范围:真的结果,范围005是范围:真的结果。由于
child
指令不创建新的作用域,因此它使用转置的作用域。从图中可以看出,从范围005到范围004没有路径(除了通过私有属性$$prevSibling,它与$$nextSibling的方向相反,但不要使用它们)

@joakimbl的解决方案在这里可能是最好的,尽管我认为在父指令的控制器上定义API比在
上定义属性更常见:

controller: function($scope) {
    $scope.SOME_CONST = 'someConst';
    this.getConst = function() {
       return $scope.SOME_CONST;
    }
}
然后在
子指令中:

link:function(scope,element,attrs,parentCtrl){
    scope.SOME_CONST = parentCtrl.getConst();
},

这就是Angular主页上的
选项卡
窗格
指令的工作方式(“创建组件”示例)。

控制器后链接fn的参数中有一个transclude fn

myApp.directive('parent', function() {
  return {
    scope: true,
    transclude: true,
    restrict: 'EA',
    template: '<div><h1>I'm a parent header.</h1></div>',
    link: function (scope, el, attrs, ctrl, transclude) {

        transclude(scope, function (clone, scope) {
            element.append(clone); // <-- will transclude it's own scope
        });

    },
    controller: function($scope) {
        $scope.parent = {
            binding: 'I\'m a parent binding'
        };
    }
  }
});

myApp.directive('child', function() {
  return {
    restrict: 'EA',
    require:'^parent',
    scope:true,
    link:function(scope,element,attrs,parentCtrl){

    },
    template: '<div>{{parent.binding}}</div>' // <-- has access to parent's scope
  }
});
myApp.directive('parent',function(){
返回{
范围:正确,
是的,
限制:“EA”,
模板:“我是家长标题。”,
链接:函数(作用域、el、属性、ctrl、transclude){
转移(范围、功能)(克隆、范围){

element.append(clone);//我也遇到了同样的问题,最后用angular手册解决了它;)

简而言之:您需要在您的父指令中使用一个控制器,并在您的子指令中使用该控制器。这样您就可以获得父属性

看 第章:创建通信指令

我将您的小提琴改为使用控制器,现在您可以访问常量:

var myApp=angular.module('myApp',[]);
函数MyCtrl($scope){
$scope.obj={prop:'foo'};
}
myApp.directive('parent',function(){
返回{
范围:正确,
是的,
限制:“EA”,
模板:“我是家长{{obj.prop}}”,
控制器:功能($scope){
this.getConst=function(){
返回“someConst”;
}                        
},
}
});
myApp.directive('child',function(){
返回{
限制:“EA”,
要求:“^parent”,
链接:函数(范围、元素、属性、ctrl){
scope.value=ctrl.getConst();
},
模板:“我是孩子……我想访问我父母的东西,但我不能。我可以访问MyCtrlScope,请看{{obj.prop}}。我如何访问我父母的链接函数中的某些常量值?这是个好主意吗?{value}。我真的不想把所有东西都放在MyCtrl},
}
});

@Mark Rajcok-回答得很好Mark,你似乎是这个网站上少数几个真正完全理解Angular的人之一。我有一个类似的问题,但在这个链接上:。我的问题是,当链接方法在child指令上运行时,child指令的模板已经呈现。这意味着我无法使用子对象中的父属性,用于在呈现之前设置作用域变量。这很好,但该值似乎是复制的,而不是绑定的(即双向数据绑定)同意,这不是双向数据绑定。要回答最初的问题,子控制器只需要访问作用域。$parent,它具有继承和双向数据绑定的优点。这非常好
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.obj = {prop:'foo'};
}

myApp.directive('parent', function() {
    return {
        scope: true,
        transclude: true,
        restrict: 'EA',
        template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
        controller: function($scope) {
            this.getConst= function() {
                return 'someConst';
            }                        
        },
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        require : '^parent',
        link: function(scope, element, attrs, ctrl) {
            scope.value= ctrl.getConst();
        },
        template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{value}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});