All geek questions in one place

How to make this custom directive better?

I am trying to implement a custom directive for the counter widget .

I was able to implement it, but there are many things that I need to cover.

  • Is it possible to write this directive better?
  • What is the best use scope:(highlight area)?
  • When you press any reset button, I want everyone to startnumberbe reset to "1"?
  • Where scopedoes it inherit ? Does it inherit from the called element?

HTML snippet

<body>
  <counter-widget startnumber=1 ></counter-widget>
  <counter-widget startnumber=1 ></counter-widget>
  <counter-widget startnumber=1 ></counter-widget>
</body>

Js fragment

  angular.module("myApp",[])
  .directive("counterWidget",function(){
  return{
    restrict:"E",
    scope:{

    },
    link:function(scope,elem,attr){
        scope.f =  attr.startnumber;
        scope.add = function(){             
            scope.f = Number(scope.f) + 1;
        }
        scope.remove = function(){
            scope.f =Number(scope.f) - 1;
        }
        scope.reset = function(){
            scope.f = 1;
        }
    },
    template:"<button ng-click='add()'>more</button>"+
             "{{f}}"+
             "<button ng-click='remove()'>less</button>&nbsp"+
             "<button ng-click='reset()'>reset</button><br><br>"
    }

  })

Thanks in advance for your help.

+4
source share
3 answers

startnumber, reset , .

, . reset:

app.directive("counterWidget",function(){
  return{
    restrict:"E",
    scope:{
      startnumber: '=',
      resetter: '='
    },
    link:function(scope,elem,attr){
        scope.f =  attr.startnumber;
        scope.add = function(){             
            scope.f++
        }
        scope.remove = function(){
            scope.f--
        }
        scope.reset = function(){
            scope.f = attr.startnumber
            scope.$parent.triggerReset()
        }
        scope.$watch(function(attr) {
          return attr.resetter
        },
        function(newVal) {
          if (newVal === true) {
            scope.f = attr.startnumber;
          }
        })

    },
    template:"<button ng-click='add()'>more</button>"+
             "{{f}}"+
             "<button ng-click='remove()'>less</button>&nbsp"+
             "<button ng-click='reset()'>reset</button><br><br>"
    }

  })

reset, :

$scope.triggerReset = function () {
    $scope.reset = true;
    console.log('reset')
    $timeout(function() {
      $scope.reset = false; 
    },100)
}

. ++ - .

reset, . . , reset, $parent scope ( triggerReset()). $scope.reset. , resetter, reset , startnumber.

: reset , . , reset . , reset. :

Plunker

EDIT:

, - $watch ? , , plunker, 1 , $watch . : $ 'miss'?

+1

ng-repeat html.you count = 3

<body>
   <div ng-repeat="index in count">
  <counter-widget startnumber=1 ></counter-widget></div>
</body>

.

http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/

( : ). . , . .

( : true). , . , , , , . , .

( : {}). ! , , , . , . , . , , .

0

.

HTML

  <body>
      <counter-widget counter="controllerScopeVariable" ></counter-widget>
  </body>

JS

 angular.module("myApp",[])
    .directive("counterWidget",function(){
        return{
           restrict:"E",
           scope:{
               counter:'='
                 },
        link:function(scope,elem,attr){
            scope.counter = parseInt(scope.counter);
            scope.add = function(){             
                scope.counter+=1;
            }
            scope.remove = function(){
                scope.counter-=1;
            }
            scope.reset = function(){
                scope.counter = 1;
             }
            },
          template:"<button ng-click='add()'>more</button>"+
                "{{f}}"+
                  "<button ng-click='remove()'>less</button>&nbsp"+
                 "<button ng-click='reset()'>reset</button><br><br>"
       }

     });
0

Source: https://habr.com/ru/post/1584218/

More articles:


All Articles