0

动态加载模板中的以下（缩短）代码中的 ng-click 不会被触发，而最后几行中默认模板内的 ng-click 是！在不隔离指令范围的情况下，我该怎么做才能让他们都被解雇？

索引.html：

<myone model="mymodel"/>

指示：

angular.module('starter.directives', [])
  .directive('myone', function ($compile, data) {

  // We want to manipulate the DOM so we need a linker function.
  var linker = function(scope, element, attrs) {

    // Wait for the data object to be initialized asynchronously.
    data.initialized.then(function(){
      // This template variable is shortened in this snipped and would normally
      // be build up regarding to the structure of the initialized data object.
      // It further contains a lot of variables from the not isolated scope (e.g.
      // mymodel).
      template =
              '<span class="input-label">{{varInScope}}</span>'
            + '<input type="text" ng-model="' + attrs.model + '" />'
            + '<button ng-click="varInScope = varInScope +1" />';
            // The ng-click above never fires :(

      // compile the expressions and append the new DOM node to this directives element.
      var child = $compile(template)(scope);
      element.append(child);
    };
  };

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

      // need the parent scope instead of a isolated scope because in the template
      // build up above are {{vars}} referenced from it.
      scope: false,

      // Cant use template function instead of the linker function above for
      // dynamically building the template because it's content is unknown and
      // not available on startup (Have to wait for the data object). 
      template: '<div ng-click="thisWorksWhateverIdo()">template</div>'
  };
});
4

0 回答 0