2015-12-04 2 views
1

У меня есть директива, которая находит высоту элементов и должна иметь такое же значение для контроллера из директивы. Я попробовал приведенный ниже код, и я не смог найти решение, столкнувшись с некоторыми проблемами.Как получить значение области директивы для контроллера в angularjs

Может ли кто-нибудь помочь мне в этом?

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]*" 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 для директивы

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; 

    } 

}); 
+0

где директива в HTML-код? – ngLover

+0

@ngLover, см. Мой обновленный код .. – User123

ответ

1

Вам не нужно $ scope.numvalue();

Ваша директива выглядит нормально. Просто добавьте его в html и измените код на следующий.

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

JSFiddle

--EDIT--

проверить обновление скрипку

JSFiddle

+0

Мне нужно иметь это значение высоты для моего контроллера. Мне нужно выполнить некоторую операцию там. любая помощь pls – User123

+0

Проверьте обновленную ссылку на jsfiddle – Aakash

0

просто выставить varible контроллера в директиве. после процесса компиляции директивы вы можете получить доступ к переменной области 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="[email protected]*" 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> 
+0

, почему вы использовали 'div-Height = "divHeight", и не могли бы вы сообщить мне, что это такое? – User123

+0

это означает, что я передаю переменную от директивы к контроллеру, если я изменяю значение в директиве, оно будет отражено так же, как и в контроллере – ngLover

Смежные вопросы