Question

我有指令找到元素高度，并且需要从指令中获得与控制器相同的值。我尝试了下面提到的代码，我找不到解决方案，面临一些问题。

有人可以帮我吗？

HTML

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="controller.js"></script>
  </head>
  <body ng-app="myModule">
   <div myDirective style="height: 300px;" ng-controller="myheight">
     {{numvalue()}}
    </div>
  </body>
</html>

script.js for directive

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

控制器的contoller.js

angular.module('myModule', []).controller("myheight", function($scope){

    $scope.numvalue = function(){

        $scope.divHeight  =  $scope.height;

        return $scope.divHeight;

    }

});

Answer 1

您不需要$ scope.numvalue（）;

您的指示看起来很好。只需将其添加到html并将代码更改为以下内容。

<div ng-app="myModule">
  <div style="height: 300px;" my-directive ng-controller="myHeight">
    Getting height {{height}}
  </div>
</div>

JSFiddle

- 编辑 -

检查更新的小提琴

JSFiddle

Answer 2

只是向指令公开一个控制器的变量。在指令的编译过程之后，您可以访问控制器中的范围变量divHeight。

  angular.module('myModule', [])
      .directive('myDirective', function($timeout) {
        return {
            restrict: 'A',
            scope:{
              divHeight: '='
            },
            link: function(scope, element) {
                scope.divHeight = element.prop('offsetHeight');
                scope.width = element.prop('offsetWidth');
            }
        };
      });

HTML

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="controller.js"></script>
  </head>
  <body ng-app="myModule">
   <div myDirective div-Height="divHeight" style="height: 300px;" ng-controller="myheight">
     {{numvalue()}}
    </div>
  </body>
</html>

如何在angularjs中将指令的范围值传递给控制器

2 个答案: