javascript - angular的Directive传值问题

问题描述

问 题

小弟用Direcrive做了一个组件，在demo上测试运行过没问题。但是放在项目上使用后发现传值传不进去。
先附上异常问题代码

angular.module('index_area').directive('stores', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            list:"="
        },
        templateUrl: 'Template/StoresSelect.html',
        link: function (scope,elem,attr) {
            console.log(scope.list)
        }
    }
})


<div class="form-lyout">
    <div class="form-title">参与区域</div>
    <div class="form-layout">
        <div class="radio">
            <label>
                 <input type="radio" name="exclusives" value="true"  ng-model='AddMusicCtrl.music.exclusive' checked>
                    全部门店
            </label>
        </div>
        <div class="radio">
            <label>
                 <input type="radio" name="exclusives" value="true"  ng-model='AddMusicCtrl.music.exclusive' checked>
                    部分门店
            </label>
        </div>
    </div>
</div>
<div class="form-lyout">
    <div class="form-title">门店筛选</div>
    <div class="form-layout">
        {{AddMusicCtrl.stores}}
        <stores list ="AddMusicCtrl.stores" ></stores>
    </div>
</div>

为了找到问题的所在我专门测试了。发现它是有值得。

{{AddMusicCtrl.stores}}

但是到了。这里就显示undefined了。如果我

<stores list ="AddMusicCtrl.stores" ></stores>

改成

<stores list ="11" ></stores>

我发现list可以将11传进去。请问下是为什么呢？怎么解决

解决方案

单纯的从你代码来看的话，只要在组件加载的时候AddMusicCtrl.stores有值，directive是可以获取到的。
所以你console出undefined的原因可能是因为在directive加载的时候，AddMusicCtrl.stores并没有值。
你可以尝试着这么写一下：

<stores list="AddMusicCtrl.stores" data-ng-if="AddMusicCtrl.stores"></stores>

或者在你的controller里面给AddMusicCtrl.stores一个默认值。

这篇关于javascript - angular的Directive传值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！