Angularjs-指令范围

时间:2013-01-30 18:18:13

标签: angularjs

请参阅此小提琴以获取完整示例:http://jsfiddle.net/lesouthern/WnvjF/7/

.directive('redirectEnterKey',function() {
    return {
        restrict : 'A',
        controller : function() {}
    }
})
.directive('redirectEnterKeyTo', function() {
    return {
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $scope.enterKeyElement = $element;
        }
    }
})
.directive('redirectEnterKeyFrom', function() {
    return {
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $scope.enterKeyElement.click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }
});

我想将变量“enterKeyElement”的范围隔离到指令redirectEnterKey,redirectEnterKeyTo和redirectEnterKeyFrom。

但是,想要使用“pageCtrl”在变量“myInput”上共享范围。

我可以这样做吗?而不必在这些指令中引用“myInput”?这是最佳做法吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

您的问题对我来说并不完全清楚,但我认为您可以从父作用域创建独立作用域,只需要从父作用域中包含一些属性,例如我已将myInput属性添加到隔离作用域,这将引用ng-model属性父母的

.directive('redirectEnterKeyFrom', function() {
    return {
        scope:{myInput'=ngModel'} 
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $scope.enterKeyElement.click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }

});

答案 1 :(得分:0)

感谢您帮助我,您给了我一些好的线索。这是一个很好的角度范围教育。

请原谅我不完整的问题。以下是此处问题的另一个示例:http://jsfiddle.net/lesouthern/jJ2Rj/

请注意,由于共享范围,隐藏了错误的输入。

这是我自己的问题的答案:http://jsfiddle.net/lesouthern/FZXUP/,对于任何有帮助的人。

基本上每个指令都有自己的作用域,并且可以通过父指令'redirectScopeExample'

绑定到父控制器
var pageModule = angular.module('pageModule',[])
.controller('pageCtrl',['$scope',function($scope) {
}])
.directive('redirectScopeExample',function() {
    return {
        restrict : 'A',
        scope : {
            hideElement : '&',
            redirectScopeExampleInput : '=ngModel'
        },
        controller : function($scope) {
        }
    }
})
.directive('redirectScopeExampleTo', function() {
    return {
        restrict : 'A',
        require : '^redirectScopeExample',
        link : function($scope,$element,$attr) {
            $element.click(function() {
                $scope.hideElement.toggle();
            });
        }
    }
})
.directive('redirectScopeExampleFrom', function() {
    return {
        restrict : 'A',
        require : '^redirectScopeExample',
        link : function($scope,$element,$attrs) {
            $scope.hideElement = $element;
        }
    }
});