Где я должен определить свою функциональную кнопку () в директиве, чтобы нажатие кнопки включало функцию?

Я не хочу использовать внешнюю область приложения, я просто хочу использовать локальную область.

var app = angular.module("myApp", []);

app.directive('aaaa', function() {
  return {
    restrict: 'E',
    scope: {
      data: '=',
      //this is not working: button: function(){console.log('hello from button');}
    },
    link: function(scope, element) {
      element.append('hello');
      element.append(' <button type="button" ng-click="button()">Click Me!</button> ')
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="myApp">

  <aaaa></aaaa>

</div>
1
d4rty 12 Янв 2017 в 17:54

3 ответа

Лучший ответ

Как сказал @tymeJV, вам нужно сначала скомпилировать html, а затем вызвать button () в контроллере директив

var app = angular.module("myApp", []);

app.directive('aaaa', function($compile) {
  return {
    restrict: 'E',
    scope: {
      data: '=',
      //this is not working: button: function(){console.log('hello from button');}
    },
    link: function(scope, element) {
      element.append('hello');

     var htmlText = ' <button type="button" ng-click="button()">Click Me!</button> ';
      var template = angular.element($compile(htmlText)(scope));
      element.append(template);
    },
    controller: function($scope, $element){
       $scope.button = function(){
           console.log('button clicked');
       }
     }
  }
});
2
digit 12 Янв 2017 в 15:06

Вы можете по ссылке

  link: function(scope, element) {
      element.append('hello');
      element.append(' <button type="button" ng-click="button()">Click Me!</button> ');
      scope.button=function(){
          //content goes here
      }
  }
-1
Nitheesh 12 Янв 2017 в 15:03

Я бы посоветовал использовать угловые шаблоны вместо element.append, см. Пример кода ниже. Тогда вам не нужен весь код компилятора и прочее.

Вы также можете заменить "шаблон:" привет

var app = angular.module("myApp", []);

app.directive('aaaa', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function(scope, element) {
      scope.button = function(){
      console.log('hello from button');
      };
    },
    template: 'hello <button type="button" ng-click="button()">Click Me!</button>'
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="myApp">

  <aaaa></aaaa>

</div>
0
Sander Ravenhorst 12 Янв 2017 в 15:11