Question

所以我的index.html中有一个nvd3图形，其高度设置为{{varyHeight}}，如此（代码片段）：

<nvd3-line-plus-bar-chart data="data"
           showXAxis="true" showYAxis="true"
           tooltips="true" interactive="true"
           showLegend="true"
           height='{{varyingHeight}}'
           >
 </nvd3-line-plus-bar-chart>

现在在我的指令中，我有一个代码，用于识别高度发生变化的时间以及新高度：

app.directive('test', function () {
 return {
 restrict: 'EA',
 scope: {},
 link: function (scope, element) {
   scope.$on('split.resize', function() {
     console.log('I got resized');
     console.log(element.height());
    });    
  }
       };
  });

在我的控制器中，我现在希望能够像这样设置新的高度：

$scope.$apply(function(){
   $scope.varyingHeight = h;  
})

我是angularjs的新手，所以我无法确定最佳方法。我已经看到答案显示如何反过来，即从控制器到指令，但这对我没有帮助。如何将element.height()从变量h传递给控制器？或者我的代码首先构造错误了吗？

Answer 1

您可以通过将height属性绑定到从控制器范围传递的值来实现。这是一个例子：http://jsbin.com/vapipizu/1/edit

重要的是，您将height="{{varyingHeight}}"替换为height="varyingHeight"，并且您的指令会绑定height属性，如下所示：

scope: {
  height: '='
}

Answer 2

我也遇到过这个问题，我通过将高度作为属性传递给指令

解决了这个问题

我的示例指令

App.directive('aBc',function () {
return {
    restrict : 'AE',
    scope : {
        gridHeight : '@'
    },
    template : '<div style= "height : {{gridHeight}}px" >'
        +'<p>sdtyhdrtydrt--  {{gridHeight}} </p>'
        + '</div>'
};

}）;

通过指令标记

传递高度

直接你可以传递高度

<div a-bc grid-height="200"></div>
<div a-bc grid-height="500"></div>
<div a-bc grid-height="1000"></div>

或者您可以从控制器设置

<div a-bc grid-height="someHeight"></div>

在控制器中初始化someHeight，如

$scope.someHeight = 500;

在AngularJS中将变量从指令传递到控制器

2 个答案: