All geek questions in one place

Why doesn't ng-click = "test ()" work, but onclick = "angular.element (this) .scope (). Test ()" does?

I defined the angles directive:

jtApp.directive("jtWizardPage", [function () {
    return {
        require: ["^ngController", "^jtWizard"],
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<ng-form id='{{pageName}}' class='page' name='wizardform' ng-submit='test()' style='width:{{maxPageWidth}}px'>" +
                  "  <div ng-transclude></div>" +
                  "  <input type='submit' style='visibility:hidden;' />" +
                  "  <button type='button' onclick='console.log(angular.element(this).scope())'>debug</button>" +
                  "  <button type='button' onclick='angular.element(this).scope().test()'>works</button>" +
                  "  <button type='button' ng-click='test()'>does not work</button>" +
                  "</ng-form>",
        scope: {
            pageName: "@",
            mainHeader: "@",
            subHeader: "@"
        },

Can someone tell me why the button in the template with onclick = "..." works, but the button with ng-click = "..." doesn’t ??? Due to this issue, ng-submit doesn't seem to work either. Shouldn't ng-click execute an expression in the same scope angular.element (this) .scope () returns?

+4
source share
2 answers

. , , . .

, ( ) test() .

+3

, , scope , .

scope , .

options ( plnkr: http://plnkr.co/edit/gq3y1Z4zHs4wvp8hiiel):

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.test = function() {
    alert('clicked');
  };

  $scope.wizard_options = {
    pageName: "@",
    mainHeader: "@",
    subHeader: "@",
    test: $scope.test
  }


  $scope.label = "The Label";
})
  .directive("jtWizardPage", [

    function($scope) {
      return {
        restrict: "AEC",
        replace: true,
        transclude: true,
        template: "<div>" +
          "  <button type='button' ng-click='options.test()'>does work</button>" +
          " <pre>{{options}}</pre>" + 
          "</div>" ,
        scope: {
          options: '='
        }

      };
    }
  ]);

HTML

<body ng-controller="MainCtrl">

  <div jt-wizard-page options="wizard_options"></div>

</body>
+1

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

More articles:


All Articles