Html 无法在AngularJs中的另一个自定义指令内调用自定义指令

我想在另一个自定义指令的模板中调用一个自定义指令。 请查找下面的代码片段-

场景1（不工作）

index.html

<write-post></write-post>

<input type="file" ng-model="file" name="file"
       id="photo-upload1" custom-on-change="changeUserProfileImage"
       value="Change Image"
       title="Change Image"/>

---

有人能帮我确定第一个场景中的错误在哪里吗？

link

在指令定义中默认为

postLink

——它在解析带有指令的模板后执行。（请在此阅读更多）

作为一种解决方案，您可以在回调中移动$eval：

  element.bind('change', function (event) {
    var onChangeFunc = scope.$eval(attrs.customOnChange);
    var files = event.target.files;
    onChangeFunc(files);
  });

正确的方法：

如果您想要运行函数-让它成为html中的函数：

custom-on-change="changeUserProfileImage(files)"

现在将其作为函数运行：

  element.bind('change', function (event) {
    var files = event.target.files;
    scope.$eval(attrs.customOnChange, {files: event.target.files});
  });

---

考虑将重构替换为<代码> CuthOnchange < /代码>指令。后者与

ng model

指令和

ng form

指令集成，提供了与AngularJS框架更好的集成。

  element.bind('change', function (event) {
    var onChangeFunc = scope.$eval(attrs.customOnChange);
    var files = event.target.files;
    onChangeFunc(files);
  });

custom-on-change="changeUserProfileImage(files)"

  element.bind('change', function (event) {
    var files = event.target.files;
    scope.$eval(attrs.customOnChange, {files: event.target.files});
  });