livro_angularjs_abordagem_pratica_objetiva/exemplo 6.7 – dir-inner-controller.html at master · mauroinagoki/livro_angularjs_abordagem_pratica_objetiva · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  <!doctype html>
  <html ng-app="myApp">
  <body>
    <div gol jogo times="Cruze vs Holy"/>
  <script src="angular.min.js"></script>
  <script type="text/javascript">
  angular.module('myApp', [])
  .directive('jogo', function() {
  return {
  scope: {
  	times: '@'
  },
  controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
  	$scope.gols = 0;
  	this.increment = function(){
  		$scope.gols++;
    };
  }],
    template: "<p>Partida: [{{times}}] </p><b>Gols do Jogo: </b>{{gols}}"
  };
  })
  .directive('gol', function() {
  return {
  	require: 'jogo', // get jogoController
    link: function(scope, el, attrs, jogoController){
    var b = angular.element("<p><button>Aumentar gols do Jogo</button></p>");

    b.on('click', function(){
      scope.$apply(function(){
        jogoController.increment();
      });
    });

    el.parent().append(b);
    }
   };
  });
  </script>
  </body>
  </html>