指令范围被覆盖

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了指令范围被覆盖相关的知识,希望对你有一定的参考价值。

我有这个指令,每当我做一个ng-repeat时,由于某种原因,当我使用console.log时,它总是从ng-repeat返回最后一个数据。

(function () {
    'use strict';

    angular
        .module('app.schoolAdmin')
        .directive('barGraph', barGraph);

    barGraph.$inject = ['$timeout'];

    function barGraph ($timeout) {
        var scope;
        var element;

        return {
            link: link,
            restrict: 'EA',
            scope: {
                data: '=',
                onClick: '&',
                methods: '='
            }
        };

        function init () {
            console.log("DATA", scope.data);
        }

        function link (_scope, _element) {
            scope = _scope;
            element = _element;

            $timeout(function () {
                init();

            }, 0);

        }
    }
})();

这是ng-repeat的代码。(使用json管道时的数据是正确的。)


            <div class="col-md-3"
                 ng-repeat="(key, group) in vm.analyticsData">
                 {{group | json}}
                 <h1>{{ key }}</h1>
                <div class="charts-container">
                    <div class="chart-block">
                        <bar-graph data="group"></bar-graph>

                    </div>
                </div>
            </div>
答案
$timeout(function () {
   init();
}, 0);

你上面的timeout导致了这个问题。

删除它以解决问题。

如果你想保留$timeout,你可以将_scope传递给你的init方法,如下所示:

  function init (data) {
    console.log("DATA", scope.data);
    console.log("REAL DATA", data);
  }

  function link (_scope, _element, attrs) {
    scope = _scope;
    element = _element;
    $timeout(function () {
      init(_scope.data);
    }, 0);

  }

这是jsfiddle的样本

以上是关于指令范围被覆盖的主要内容,如果未能解决你的问题,请参考以下文章

这些角度电子邮件指令代码片段如何连接

此数据是不是被另一个组件覆盖?

片段布局不覆盖整个屏幕

指令选择器调查

活动结果片段索引超出范围:0x20001

代码覆盖率是个啥概念?