Question

使用Javascript：

angular
  .module('app', [])
  .directive('compileExample', compileExample);
  function compileExample() {
    return {
      restrict: 'E',
      scope: {},
      compile: function(tElement, tAttrs) {
        angular.element(tElement).append("My name is {{name}}");
      },
      link: function(scope, element) {
        scope.name = "Liam";
      },
    }
  }

HTML：

git checkout master             #start on master
git merge feature --no-commit   #merge in feature, but don't commit yet
git checkout HEAD file1         #restore file1 to its state before the merge
git checkout HEAD file2         #restore file2 to its state before the merge
git commit                      #complete the merge commit

这按照我期望的方式工作，首先编译运行并将该模板附加到元素，而不是控制器将名称更改为Liam，因此视图显示“我的名字是Liam”。从阅读Angular docs链接也可以在编译后运行，那么为什么当我将控制器更改为链接函数名称时，它永远不会更新或显示在视图中？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Answer 1

指令链接函数和指令控制器函数之间的一个重要区别是参数的提供方式。

控制器函数参数按名称注入。

  //This will work
  controller: function($element, $scope) {
      $scope.name = "Liam";
  },

  //AND this will work
  controller: function($http, $scope, $element) {
       $scope.name = "Liam";
  },

控制器函数参数由$injector服务提供，包括所有AngularJS服务以及本地$scope，$element，$attrs和{{1 }}。

链接功能参数由位置提供。

$transclude

链接函数参数由//This will work link: function(scope, element) { scope.name = "Liam"; }, //This will FAIL link: function(element, scope) { scope.name = "Liam"; },服务按位置提供，参数使用的名称通常用作JavaScript中的函数参数。

有关注入的本地人的详细信息，请参阅AngularJS $compile Service API Reference -- controller。

有关按名称注入的详细信息，请参阅this Stack Overflow Answer。

Answer 2

好像你在指令定义对象中有编译，它会禁用你在编译之外指定的任何默认的post-link函数...如果直接从编译返回，链接只能用于编译..希望有人有更多角度体验可以详细说明

Angular指令链接中的范围是否在角度指令控制器中具有相同的$ scope？

2 个答案: