Question

我对指令和控制器有疑问。

我希望在我的情况下将数据从指令传递给控制器。

模板html

<img ng-src=“{{url}}” image-detect />

<div>width: {{width of image}}</div>  // how do I show the value here
<div>height: {{height of image}}</div>

指令

(function () {
     angular
        .module(‘myApp’)
        .directive(‘imageDetect’, imageDetect);

    function imageDetect() {
        var directive = {
            'restrict': 'A',       
            'controller': imageController
        };

        return directive;
    }

    function imageController($scope, $element) {
        $element.on('load', function() {
            $scope.imageWidth = $(this).width();
            $scope.imageHeight = $(this).height();

           //not sure what to do to pass the width and height I calculate in directive to the parent
        });
    }
   })();

如何将imageWidth和imageHeight传递到父作用域并在模板中显示？非常感谢！

Answer 1

我想到了两种方法：

你可以在base / parent / any范围内有一个像imageDimention这样的对象，然后通过范围隔离与指令共享，然后从指令的控制器范围中你可以访问该imageDimention对象和设置其imageWidth和imageHeight属性。在指令中设置这些属性也将在base / parent / any scope中生效：

从angular documentation

angular
    .module('yourapp')
    .directive('myImage', function() {
      return {
        restrict: 'E',
        scope: {
          imageDimention: '=imageDimention'
        },
        controller: 'ImageController'
      };
    });

然后在ImageController的范围内，您可以访问相同的imageDimention对象

创建一个ContextService，它可用于在不同角度组件之间共享数据，而不仅仅是这些图像属性。将ContextService设置为有些通用，以便可以重用/通用。

ContextService可以是：

angular.module('yourapp')
        .factory('ContextService', ContextService);
    function ContextService() {
        var service = {};
        var data = {};
        service.set = set;
        service.get = get;


        function set(key, value) {

            if(key !== null && key !== undefined){
                data[key] = value;
            }

        }

        function get(key) {
            return data[key];
        }

        return service;
    }

然后您可以将此服务注入角度组件（控制器/指令/其他服务）并将其作为某种全局对象访问，因为服务是单例，这将作为数据共享模块。

在你的情况下，你可能有一个附加到视图的控制器，所以假设你有那个控制器，应该在这个控制器范围内声明一个对象说image：

$scope.image = {
    url: 'imageUrl'
    width: '0px',
    height: '0px',
}

然后你的html模板应该是这样的：

<img ng-src="{{image.url}}" image-detect />

<div>width: {{image.width}}</div>
<div>height: {{image.height}}</div>

你的指令应如下所示：

(function () {
     angular
        .module(‘myApp’)
        .directive(‘imageDetect’, imageDetect);

    function imageDetect() {
        var directive = {
            'restrict': 'A',
            'scope': {
                'image': '=image'
            },
            'controller': imageController
        };

        return directive;
    }

    function imageController($scope, $element) {
        $element.on('load', function() {
            //here you can access image object from scope which is same as controller that is attached to the view
            $scope.image.width = $(this).width();
            $scope.image.height = $(this).height();
        });
    }
   })();

我希望这可能会有所帮助......

在我的情况下如何将数据从指令传递到父作用域？

1 个答案: