Question

我已经定义了一个angularjs指令，如下所示：

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: "@"
        },

任何人都可以告诉我为什么带有onclick =“...”的模板中的按钮有效，而带有ng-click =“...”的按钮却没有？由于这个问题，ng-submit似乎也不起作用。不应该ng-click执行同一范围上的表达式angular.element（this）.scope（）返回？

Answer 1

您已使用isoloated范围创建了指令。它在一个案例中起作用而在另一个案例中不起作用的原因是它使用不同的范围。在第一种情况下，测试功能在第二种情况下可见。

要使它工作，你应该使用继承（非隔离）范围创建指令或将test（）函数传递给隔离范围。

Answer 2

这是因为当您在指令中声明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>

为什么ng-click =“test（）”不起作用，但是onclick =“angular.element（this）.scope（）。test（）”吗？

2 个答案: