angularjs - Passing value to directive and change css properties -


Hi, I'm trying to get my head about these instructions.

Basic problem: In my scope, in my property, called an Arrow, the angle (aro) should be converted to CSS (conversion: rotate). I have made that instruction that it should work:

HTML:

  & lt; div class = "weather-div" & gt; & Lt; img ng-src = "..// img / icons / wetter / wind-arrow / direction.png" arrowdirection = "{{menu.weather.arrow}}" & gt; & Lt; / Div & gt;   

Director:

  AppDirectives.directive ("arrowdirection", [function () {Returns {Template: "", restrict: 'A' Scope: {}, link: function (scope, element, etter) {// Get the angle from the original scan version angle = scope. Arrow; // get the image to turn () var element = angular.element (document) ). ('# Theimagetofindfromsameobjectdirectiveisin'); // ON start img element.css ({'-moz-transform': 'rotate (' + angle + 'deg),' -webkit-transform ':' rotate ('+ angle + 'degree),' o-transform ':' rotate ('+ angle +' degree) ',' -mms-transform ': 'Rotate (' + angle + 'degree)'}))}}}}}]);   

1: Original Parental Price List menu in the Directorate. How can I reach Weather.ero or pass the value in the instruction and can get there there? 2: How do I get an image element?

I hate blind directions (so many rooms for error when you can not test). If you can produce a Bela / plnkr, then I can update.

Take the key:

  1. You do not need to use ng-src which will change anything that is binding.
  2. area: {} separates you from the original controller to add an arrow direction for you on the scope ( arrow = '= arrow direction ) You have to use the scope feature. It sets a two way data binding for the value set when calling the Directives.
  3. When you want a camel case, you put - between the words. / li>
  4. the arrow will not be set with the directive link so you need to setup a clock.
  5. Angularity is linked to the element Directorate so you do not have to ask a question for this.
  6. Take your time to ask your questions, if your A code is formatted, then b. Create a simple example: Bela / plnkr
      
    div class = "weather-div" & gt; & Lt; img src = "..// img / icons / wetter / wind-arrow / direction.png" arrow-direction = "menu.weather.arrow" & gt; & Lt; / Div & gt; Javascript App Directional Directive ("Arrayrections", [Function () {Returns {Template: "", Restricted: 'A', Scope: {/} Arrow: '= arrow direction'}, link: function (scope, element, etter) {// Get angles from the area of ​​the legs = angle = scope.arrow; scope. $ Watch ('arrow', function) // to turn the image () // element is img element.css ({'-moz-transform': 'rotate (' + angle + 'deg),' -webkit-transform ':' rotate (' + angle + 'deg', '-o-transformform': 'rotate (' + angle + 'degree)', '-mma Transform ':' Rotate ('+ angle +' degree) '})}}}}}}}}]);

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -