Question

这是我在我的应用中遇到的一个问题，我将在一个简单的示例中重现它：

<div f-outer>
    <div f-inner dat="dat">
        <a href="javascript:" ng-click="run(dat, $event)">
            Click Me
        </a>
    </div>
</div>

单击＆＃34;单击我＆＃34;，我希望执行run指令中定义的f-inner函数。但事实并非如此。

.directive('fOuter', function () {
    return {
        link: function (scope) {
            scope.dat = { x: 1, y: 2 };
            console.log('fOuter.link');
        }
    };
})

.directive('fInner', function () {
    return {
        restrict: 'A',
        scope: {
            dat: '='
        },
        link: function (scope) {
            console.log('fInner.link');
            scope.run = function (dat, $event) {
                console.log('fInner.scope.run()', dat, $event);
            };
        }
    };
})

我也是

以下是例子：

http://jsfiddle.net/5QtJs/2/

我还添加了translude而没有运气：

transclude: true,
template: "<div ng-transclude></div>",

http://jsfiddle.net/5QtJs/3/

Answer 1

使用transclude是正确的，假设您想要包含任意内容。在您的示例中，转换是不必要的。您正在进行的ng-click通话并未找到您的＆＃39; run＆＃39;你的指令中的方法。（因为，运行用于角度模块，我建议不要在代码中使用）。我在下面重构了你的指令。

<div ng-controller="Ctrl3">
  <div f-outer>
      <div f-inner dat="data">Will not show since using 'replace'</div>
  </div>
</div>

.directive('fOuter', function () {
  return {
      link: function (scope) {
          scope.dat = { x: 1, y: 2 };
          console.log('fOuter.link');
      }
  };
})
.directive('fInner', function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            dat: '='
        },
        template: '<div>' +  
                    '<a ng-click="run(dat, $event)">Click Me</a>' +
                  '</div>',
        link: function (scope) {
            console.log('fInner.link');
            scope.run = function (dat, $event) {
                console.log('fInner.scope.run()', dat, $event);
            };
        }
    };
});

AngularJS嵌套指令，内部指令＆ng-ng-click未触发

1 个答案: