angularjs:另一个指令,继承或共享它的孤立范围

时间:2014-04-15 07:59:33

标签: angularjs scope angularjs-directive nested share

原点问题是:我想创建一个指令来自动处理字段检查,结果应该是这样的:

<div field-check="check.item_name">
    <span>Item Name:</span>
    <input type='text' ng-model="item.item_name" />
    <error-message>ITEM NAME INVALID!</error-message>
</div>

所以我创建了两个指令:filedCheck和errorMessage,第二个需要第一个。 我的原始代码如下:

(->
    app.directive 'fieldCheck', () ->
        search_ng_model_elem = (element) ->
            if element.attributes?
                if element.attributes.getNamedItem('ng-model')
                    return element

            if element.children?.length
                for e in element.children
                    r = search_ng_model_elem(e)
                    return r if r?

        priority: 0
        restrict: "A"
        replace: false
        scope:
            'check': '=fieldCheck'
        controller: ($scope, $element) ->
            $scope.valid = true
            model_elem = search_ng_model_elem($element[0])
            alert 'directive: fieldCheck compile error (ng-model not found) !' if not model_elem?
            model_name = model_elem.attributes.getNamedItem('ng-model').value
            if not $scope.check?
                alert 'check func not found!'
            else
                angular.element(model_elem).scope().$watch model_name, ((data) ->
                    $scope.valid = $scope.check(data)
                ), true
            $scope: $scope
        link:
            post: (scope, element, attrs, controller) ->
                scope.error = message: "error!"

    app.directive 'errorMessage', () ->
        priority: 2
        require: '^fieldCheck'
        restrict: "E"
        template: '<p class="txt-alert" ng-class="{hide: valid}" ng-bind="message"></p>'
        #scope:
        #   'message': '=message'
        replace: false
        link:
            post: (scope, element, attrs, controller) ->
                scope.message = element.text() or '??????'
                alert scope is controller.$scope.$parent
)()

为了更容易阅读,我简化了我的代码所以它看起来像这样:

app.directive 'fieldCheck', () ->
    restrict: "A"
    scope:
        'check': '=fieldCheck'
    controller: ($scope, $element) ->
        model_elem = search_ng_model_elem($element[0])
        model_name = model_elem.attributes.getNamedItem('ng-model').value
        angular.element(model_elem).scope().$watch model_name, ((data) ->
            $scope.valid = $scope.check(data) ### 'valid' is the value I want to set to [the shared scope]
        ), true
        $scope: $scope
    link: (scope, element, attrs, controller) ->
        scope.message: "error!"

app.directive 'errorMessage', () ->
    require: '^fieldCheck'
    restrict: "E"
    template: '<p ng-class="{hide: valid}" ng-bind="message"></p>' ### 'valid' is the value I want to get
    link: (scope, element, attrs, controller) ->
        scope.message = element.text() or '??????'
        alert scope is controller.$scope.$parent

问题是,&#34;范围是控制器。$ scope。$ parent&#34;返回true,这意味着我从指令errorMessagee的link函数获得的范围不是我将数据放入的$ scope,而是它的父级。所以问题是:如何使这些指令共享相同的范围?

0 个答案:

没有答案