小编Nun*_*noM的帖子

很长一段时间我一直想知道这个问题:在使用AngularJS时,我应该直接在视图上使用模型对象属性,还是可以使用函数来获取该属性值？

我一直在做一些小的家居项目的角度,和(特别是与只读指令或控制器上工作),我倾向于创建范围的功能来访问并在视图中显示的范围对象及其属性值,但性能明智的,是这是一个好方法吗？

这种方式似乎维护视图代码,因为如果由于某种原因,对象改变时(由于服务器实现或任何其他特定原因),我只需要改变指令的JS代码,而不是HTML更容易.这是一个例子:

//this goes inside directive's link function
scope.getPropertyX = function() {
    return scope.object.subobject.propX;
}

在视图中我可以简单地做

<span>{{ getPropertyX() }}</span>

代替

<span>{{ object.subobject.propX }}</span>

在有时它涉及的HTML混乱中,它更难维护.另一种情况是使用范围函数来测试ng-if上的评估的属性值,而不是直接使用该测试表达式:

scope.testCondition = function() {
    return scope.obj.subobj.propX === 1 && scope.obj.subobj.propY === 2 && ...;
}

那么,这种方法有利有弊吗？你能否就这个问题向我提供一些见解？它一直困扰着我最近,在一个沉重的应用可能会如何表现,例如当一个指令可以得到非常复杂的,而且最重要的是可以一个NG重复可能产生的情况下,几百或几千个内部使用.

谢谢

我在这里遇到了一些问题,这些问题给了我一些我现在遇到的问题的提示,但似乎没有一个问题符合这个要求.

我目前正在使用角度模块ngCropper(https://github.com/koorgoo/ngCropper),它可以轻松处理来自文件输入的图像,但我还需要它与外部URL一起工作.为了使用外部URL,我使用了faheyyy(https://github.com/koorgoo/ngCropper/issues/3)给出的建议,但现在我正在处理CORS问题,我无法对服务器进行更改.

所以,我想在隐藏的HTML元素上加载图像并以某种方式获取数据,将其编码为Base64,然后我就可以在cropper模块上使用它而无需创建新的GET请求(这将是创建CORS问题).我也尝试创建一个读取图像源的指令(该指令插入img元素)并尝试将其放在canvas元素上,然后获取dataURL:

.directive('toBase64', function ($document) {
    return {
        restrict : 'A',
        link : function (scope, element, attr) {

          element.on('load', function () {
            getBase64Image(element);
          });

          function getBase64Image(element) {
            var theImage = new Image();
            theImage.src = element.attr("src");
            var imageWidth = theImage.width;
            var imageHeight = theImage.height;

            var canvas = element.siblings('#cropCanvas');
            canvas.width = imageWidth;
            canvas.height = imageHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(element, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
          }
        }
    };
}); …