javascript - Angularjs如何使用指令传入数据

Question

我想做的是制作一个函数，这样我就可以改变我的 ng-grid 列宽的高度。除了我的控制器的范围需要与我的指令中的范围进行通信这一事实之外，这无关紧要。

.directive('getWidth', function(){
    return{
        controller: 'QuotesCtrl',
        link: function(scope){
            scope.smRowHeight = function(the value i want){
                scope.theRowHeight = the value i want;
            }
        }
    }
})

我只想能够进入我的 html 并说嘿这个 div 我想要高度 20

<div getWidth = '20'></div>

我环顾四周，找不到与这件事有关的任何东西。顺便说一句，在我的 QuotesCtrl 中，我像这样初始化了行高

$scope.theRowHeight;

有什么建议么？

Answer 1

指令是惊人的！您可以传入所谓的隔离作用域，然后您可以将值作为字符串或对控制器作用域的引用传递。您应该研究隔离范围的 3 个选项。= @ & 请参阅文档示例下方的链接。

这是一个有效的 JSFiddle

.directive('getHeight', function(){
    return{
        scope: {
           "rowHeight": '='
        },
        controller: 'QuotesCtrl',
        link: function(scope){
            scope.smRowHeight = function(the value i want){
                scope.theRowHeight = the value i want;
            }
        }
    }
})

您需要更新您的 html 以传入新的范围值。

<div get-height row-height='20'></div>

有关指令的更多信息

Answer 2

尝试这样的事情：

.directive('getWidth', function(){
    return{
        controller: 'QuotesCtrl',
        link: function(scope){
            console.log(scope.theRowHeight);
        },
        scope: {
           'theRowHeight': '='
        }
    }
});

标记：

<div the-row-height="20"></div>