嵌套指令未正确继承父作用域

时间:2015-12-22 16:38:27

标签: javascript angularjs inheritance angularjs-directive isolate-scope

嵌套指令存在问题并从父级继承作用域。碰巧我想继承的范围是一个孤立的范围。我有以下代码

的test.html

<div ng-controller="testCtrl as test">
  <special-select data-selected-item="test.selectedThing">
     <special-select-selected-item></special-select-selected-item>
  </special-select>
</div>

app.js

angular
    .module('testApp', ['special-inputs'])
    .controller('testCtrl', [
        function() {
            this.items = [
                { id: 1, name: 'alex 1', displayName:"alex 1 dn", imageUrl: 'http://placehold.it/505x100' }
            ];

            this.selectedThing = this.items[0];

            this.test = function() {
                console.log('test fn');
            }
        }
     ]);

特殊inputs.js

angular
        .module('special-inputs', [])
        .directive('specialSelect', [
            function() {
                return {
                    restrict: 'E',
                    replace: true,
                    transclude: true,
                    template: '<div class="container" ng-transclude></div>',
                    scope: {
                        selectedItem: '='
                    },
                    link: {
                      pre: function(scope) {
                        console.log('parent link pre - ', scope.selectedItem);
                      },
                      post: function(scope) {
                        console.log('parent link post - ', scope.selectedItem);
                      }
                    }
                }
            }
        ])
        .directive('specialSelectSelectedItem', [
            function() {
                return {
                    restrict: 'E',
                    replace: true,
                    transclude: true,
                    template: '<div class="selected" ng-transclude></div>',
                    scope: true,
                    link: {
                      pre: function(scope) {
                        console.log('child link pre - ', scope.selectedItem);
                      },
                      post: function(scope) {
                        console.log('child link post - ', scope.selectedItem);
                      }
                    }
                }
            }
        ])

正如您所看到的,嵌套指令正在尝试创建它自己的隔离范围,但是抓住了#34; selectedItem&#34;来自父母的孤立范围。

文档说它应该继承和转换是半原型的,所以我想知道它为什么不起作用。谢谢。任何帮助将不胜感激

更新 我已经更新了代码,以显示我现在遇到的问题。似乎范围项在父级的前+后链接函数中设置,但永远不会被放到子级。控制台输出

2015-12-29 15:13:44.258 special-select.js:35 parent link pre -  Object {id: 1, name: "alex 1", displayName: "alex 1 dn", imageUrl: "http://placehold.it/505x100"}
2015-12-29 15:13:44.258 special-select.js:64 child link pre -  undefined
2015-12-29 15:13:44.260 special-select.js:67 child link post -  undefined
2015-12-29 15:13:44.260 special-select.js:38 parent link post -  Object {id: 1, name: "alex 1", displayName: "alex 1 dn", imageUrl: "http://placehold.it/505x100"}

我尝试使用scope.$watchattrs.$observe来填充值

0 个答案:

没有答案