Question

我有以下代码：

dynamicTemplateItem.js ：

angular.module('mod1')
    .directive('dynamicTemplateItem', ['$rootScope', '$compile', '$parse', '$http',
      function ($rootScope, $compile, $parse, $http) {

        var linker = function ($scope, $element, $attrs) {

          var templateUrl = $rootScope.dynTemplate[$attrs.type];
          // it will be something like "views/templates/template.html"
          if (templateUrl) {
            $http.get(templateUrl).then(function (response) {
              $compile($element.html(response.data).contents())($scope);
            }, function (e) {
              console.error(e);
            });
          }
        };

        return {
          restrict: "E",
          link: linker,
          scope: {
            type: '='
          }
        };

      }]);

视图/主html ：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div ng-cloak class="container">
      <dynamic-template-item type="login"/>
    </div>
  </body>
</html>

views / templates / template.html ：

<div ng-controller="Controller1">
 <div> ctrl1 </div>

 <div ng-controller="Controller2">
    <div> ctrl2 </div>
    <select ng-change="switch()" ng-options="test.name for test in tests.availableTests track by test.id" 
                 ng-model="tests.selectedTest"></select>
  </div>
</div>

Controller2.js ：

angular.module("mod1").controller("Controller2", ['$scope', '$rootScope', '$location', "$state"
  function ($scope, $rootScope, $location, $state) {

    // ...
    $scope.switch = function () {
      // ...
    };

  }]);

问题是$scope.switch函数以及Controller2中的任何其他函数都未被访问。

我在做什么错了？

在使用dynamicTemplateItem伪指令引入动态模板之前，习惯于工作，因此在我在伪指令中使用main html时，在除template.html和templateUrl: views/main.html之前，都是这样。

我的angularjs版本是1.7

谢谢

Answer 1

这里的问题是您要声明具有隔离范围的指令：

scope: {
    type: '='
}

由于从属性中检索type时似乎不需要它，因此应从de声明中删除作用域，并且指令应能够访问父作用域。

return {
    restrict: "E",
    link: linker
};

编译后的动态模板无法访问ng-controller函数

1 个答案: