Question

我是Angular的新手，我正在试图找出为什么当我在内部调用console.log(foo);时，当前的代码，它应该获得用户输入并将其传递给图表指令，导致未定义该指令。

标记：

     <div class="row" ng-controller="Controller">

        <input type="text" ng-model="key" >
        <div class="col-md-12" chart>
            <section data="{{key}}"></section>
        </div>

      </div>         
    </div>

App.js

(function(){
    var draw = angular.module('Draw', [])  
    draw.controller('Controller',function($scope) {
        $scope.key = 'aSampleKey';
     });

    draw.directive('chart', function(){

    function link(scope, element, attr){    
        var foo = scope.data;

        //why is this undefined? 
        console.log(foo);
    }

    return {
        link: link,
        restrict: 'A',
        scope: {data: "="}
    };
}); 
})();

由于

Answer 1

在隔离范围上声明值时，需要将其作为属性传递给指令：

<div class="col-md-12" chart data="key">
    <section></section>
</div>

此外，如果您希望将值作为带{{key}}的字符串传递，则在隔离范围时需要使用@符号：

<div class="col-md-12" chart data="{{key}}">
    <section></section>
</div>

和

return {
        link: link,
        restrict: 'A',
        scope: {data: "@"}
    };

为什么我不能在Angular中将用户输入传递给该指令？

1 个答案: