草庐IT

$范围变量功能

程序员大本营 2024-04-07 原文

我必须在应用程序中拍摄几张照片,我用离子和角度制作。

我有3个按钮,每个按钮都必须拍照。这是HTML的一面:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="takeImage1"  height="40" width="40" style="margin-right: 7px;" ng-click="Take"><img ng-src="{{srcImage2 || 'img/foto_defecto.png'}}" id="srcImage2" height="40" width="40" style="margin-right: 7px;" ng-click="takeImage2"><img ng-src="{{srcImage3 || 'img/foto_defecto.png'}}" id="srcImage3" height="40" width="40" style="margin-right: 7px;" ng-click="takeImage3">

没关系,我有内联CSS,这是一个测试。

这些是功能:其中3个,每个按钮一个。

    $scope.takeImage1 = function() {      var options = {        quality: 100,        destinationType: Camera.DestinationType.DATA_URL,        sourceType: Camera.PictureSourceType.CAMERA,        allowEdit: false,        encodingType: Camera.EncodingType.PNG,        targetWidth: 250,        targetHeight: 250,        popoverOptions: CameraPopoverOptions,        saveToPhotoAlbum: true      };      $cordovaCamera.getPicture(options).then(function(imageData) {        $scope.srcImage1 = "data:image/PNG;base64," + imageData;      }, function(err) {        // error      });    }   

功能的作用是:拍摄图片,保存它,并在srcimage1/2/3/等下显示缩略图。

但是,我只想拥有一个功能,然后从每个按钮调用它。

为此,我更改了代码:

呼叫:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

功能:

 $scope.hacerFoto = function(numero) {              var options = {        quality: 100,        destinationType: Camera.DestinationType.DATA_URL,        sourceType: Camera.PictureSourceType.CAMERA,        allowEdit: false,        encodingType: Camera.EncodingType.PNG,        targetWidth: 250,        targetHeight: 250,        popoverOptions: CameraPopoverOptions,        saveToPhotoAlbum: true    };  var buscar = "srcImage".concat(numero);  alert(buscar);  $cordovaCamera.getPicture(options).then(function(imageData) {        $scope.buscar = "data:image/PNG;base64," + imageData;  }, function() {        alert("error al hacer la foto");  });   }

但是,那 $scope.buscar 我打算制作一般功能不会更新缩略图。

alert(buscar); 确切地展示了我的期望 $scope.buscar 不会更新图像。我不知道为什么它不起作用。

我找到了一个解决方案,这是下一个:

  $cordovaCamera.getPicture(options).then(function(imageData) {        var image = document.getElementById('srcImage'+numero);        image.src = "data:image/PNG;base64," + imageData;  }, function() {        alert("error al hacer la foto");  });

只需使用JS取ID并替换SRC即可。但是,@vladimir Zdenek的答案更加优雅和角度 - 因此我将代码更改为此。我接受了他的答案作为正确的答案。

看答案

您必须从以下方式更改模板中对图像的引用

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

<img ng-src="{{buscar1 || 'img/foto_defecto.png'}}" id="buscar1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

然后在您的功能中,更改以下行

$scope.buscar = "data:image/PNG;base64," + imageData;

对此

$scope['buscar' + numero] = "data:image/PNG;base64," + imageData;

另外,请确保在模板中也更改其他图像。

有关$范围变量功能的更多相关文章

  1. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量? - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用? 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  2. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem,我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器,因为应该只有这两个服务器在运行,而不是多个。在运行时,我想调用这两个服务器上的一些方法来更改变量。我的问题是,我无法通过基类的类方法访问fork的实例变量。此外,我不能在我的基类中使用线程,因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了,比如@@server。但是当我试图通过基类访问这个变量时,它是nil。我读到在Ruby中不可能在分支之间共享类变量,对吗?那么,还有其他解决办法吗?我考虑过使用单例,但我不确定这是

  3. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别,作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  4. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  5. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据,该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中,我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤,而不是严格相等。然而,这是行不通的:scope:my_scope,->(que

  6. ruby - 当使用::指定模块时,为什么 Ruby 不在更高范围内查找类? - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后,我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是,如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误,还是仅仅是Ruby解析变量名的方式的逻辑结果? 最佳答案 Isthisabug,or

  7. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  8. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  9. ruby-on-rails - 使用 ruby​​ 将多个实例变量转换为散列的更好方法? - 2

    我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效,它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗?编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分,但这仍然是主要问题。

  10. ruby - Rack:如何将 URL 存储为变量? - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

随机推荐