AngularJS。指令'隔离范围,从父范围推送值

时间:2013-12-02 02:00:45

标签: angularjs

我尝试将parent scope的值传递给directive。致isolated scope。如果我将值作为参数传递给我的指令,它就可以了。但是id不适用于父范围。

以下是我如何使用它:

<div ng-init="event='hello'">  <!-- this is parent scope -->

    <input31></input31>

</div>

这是指令本身。

directives.directive("input31", [function() {    
    return {
        restrict: 'E',
        template:"<div> <input type='text' ng-model='data' /> {{data}} </div>",
        replace: true,
        scope : { //defining isolated scope
            event: "=event"  // pushing value to isolated directive scope
        }
    }

}]);

最后我希望event var填充'hello'值,但我有null

更新

我认为可以选择/过滤从父作用域使用的内容,过滤器类型。就像在父作用域中我有a,b,c然后指定'scope {a:'= a'}'我只能从父作用域转移'a'。但据我所知,这不是要走的路。 仅当将值作为指令参数传递(?)

时才能执行此操作

3 个答案:

答案 0 :(得分:4)

使用隔离范围绑定,您需要将值作为指令的属性传递。

<input31 event=event></input31>

从文档/维护的角度来看,这可能是一个优势。

但是,如果你真的不想把它作为一个属性传递,但是否则需要一个隔离范围,那么你可以将值复制到父内部的范围内而不是使用绑定指令的链接功能。

link: function ($scope) {
    $scope.event = $scope.$parent.event;
}

如果你这样做,那么你不需要通过隔离范围传递它,所以指令的范围可以如下所示:

scope : { 
        },

答案 1 :(得分:0)

您可以使用指令DOM元素中的现有范围。您可以通过以下任一方式执行此操作:

  1. 将范围设为false
  2. 根本不设置范围(默认范围设置为false )。
  3. 请参阅此jsFiddle以获取示例。

    然后可以像这样定义你的指令:

    app.directive('input31', function () {
        return {
            restrict: 'E',
            template:"<div> <input type='text' ng-model='event' /> {{event}} </div>",
            replace: true,
            scope : false // or omit this line
        };
    });
    

    如果您需要隔离范围,则必须指定要从父范围绑定的值。您可以通过两种方式执行此操作:

    1. 将特定属性传递给指令的隔离范围,例如<input31 event="event">
    2. 直接在您的指令中引用父作用域。例如$scope.$parent.event

答案 2 :(得分:0)

我举了一个我一直在问的例子。

https://github.com/Sergey80/angularjs-examples/blob/master/public/examples/directive_isolate_scope/sample6_at_sign.html

可以在Perent范围内使用父范围。