Question

该指令分配给一个图像，它使用一个名为Cropper的jQuery插件。如何在HTML或其他角度控制器中获取元素的动态变量宽度和高度：.directive( "imgcrop", [function ($scope, $controller) { return { restrict: "A", scope: { proposal : "=" }, transclude: true, replace: true, link : function ( $scope, $el, $attr ) { $attr.$observe( "src", function ( src ) { jQuery( '#cropImage' ).cropper('destroy'); jQuery( '#cropImage' ).cropper( { viewMode : 0, zoomable : false, preview: ".extra-preview", dragMode : 'crop', guides : true, highlight : true, cropBoxMovable : true, cropBoxResizable: true, crop : function ( e ) { // Output the result data for cropping image. console.log( e.width ); console.log( e.height ); } } ); } ); } } } ] );或'a:2:{s:3:"key";s:0:"";s:8:"solution";a:1:{i:0;a:1:{i:0;a:3:{s:4:"text";s:6:"**你好";s:3:"fig";N;s:5:"score";i:0;}}}}'

#!/usr/bin/env python 
#coding=utf-8
string='a:2:{s:3:"key";s:0:"";s:8:"solution";a:1:{i:0;a:1:{i:0;a:3:{s:4:"text";s:6:"**你好";s:3:"fig";N;s:5:"score";i:0;}}}}'
import phpserialize
dict=phpserialize.loads(string)

Answer 1

设置范围绑定，您可以使用它将宽度和高度传递回控制器。

    .directive( "imgcrop", [function ($scope, $controller) {
          return {
              restrict: "A",
              scope: {
                proposal : "="
                , croppedWidth: '='
                , croppedHeight: '='
              },
              transclude: true,
              replace: true,
              link    : function ( $scope, $el, $attr ) {
                  $attr.$observe( "src", function ( src ) {
                      jQuery( '#cropImage' ).cropper('destroy');
                      jQuery( '#cropImage' ).cropper( {
                          viewMode        : 0,
                          zoomable        : false,
                          preview: ".extra-preview",
                          dragMode        : 'crop',
                          guides          : true,
                          highlight       : true,
                          cropBoxMovable  : true,
                          cropBoxResizable: true,
                          crop            : function ( e ) {
                              // Output the result data for cropping image.
                              $scope.croppedWidth = e.width;
                              $scope.croppedHeight = e.height;
                          }
                      } );
                  } );
              }
          }
    } ] );

然后在你的形象上：

<img imgcrop croppedWidth="vm.width" croppedHeight="vm.height">

如何从angular指令访问变量？

1 个答案: