Question

我试图拖动图片并将其放在网络浏览器上。删除图像后，我在控制器中获取base64数据，我想将数据传递给templateUrl。这是我的代码：

控制器：

//After drop the image, pass the base64 data to dataUrl
$scope.dataUrl = e.target.result;

指令：

.directive('crop', [function () {
    return {
        restrict: 'E',
        templateUrl: 'img-token/views/img-crop.html',
        scope: {
            width: '=',
            height: '=',
            dataUrl: '@'
        },
        link: function (scope, elements, attrs) {

            $(elements[0]).children().first().jWindowCrop({
                targetWidth: width,
                targetHeight: height,

                }
            });
        }
    };
}]);

IMG-crop.html

<img class="crop_me" ng-src="{{dataUrl}}"/>

的index.html

<crop width="300" height="300" dataUrl="{{dataUrl}}"></crop>

我想在控制器和templateUrl之间绑定dataUrl，我的代码有什么问题吗？

Answer 1

好的，我已经找到了为什么你的代码无效。

指令的链接功能出错，width和height未定义。它们属于范围，因此代码应为：

$(elements[0]).children().first().jWindowCrop({
  targetWidth: scope.width,
  targetHeight: scope.height,
});

在指令定义中，范围对象属性必须位于camelCase dataUrl中，但在html属性中，它必须位于kebabCase data-url中：
```
<crop width="300" height="300" data-url="{{dataUrl}}"></crop>
```
这个是最棘手的，对于任何以data-开头的属性，angular会在使用之前删除前缀，因此来自2的data-url将成为{{1最终。逻辑是允许人们编写一个严格符合HTML规范的角度应用程序。解决方法是使用url或仅使用其他名称。
```
data-data-url
```

希望这有帮助！

示例plunker： http://plnkr.co/edit/uo65UVYaF24RBUBeJ5jA?p=preview

如何在controller和templateUrl之间使用数据绑定？

1 个答案: