Question

提前感谢您花时间研究这个问题

我有服务器端生成的代码，这些代码呈现围绕预渲染内容的指令。

  <serverside-demo color="blue">
  <p><strong>Content from Server, wrapped in a directive.</strong></p>
    <p>I want this color to show: <span ng-style="{color: color}">{{color}}</span></p>
    <button ng-click="onClickButtonInDirective()">Click Me</button>
  </serverside-demo>

这意味着1.）指令标记，2。）指令标记内的内容，3。）ng-click和4.）花括号语法全部由服务器生成。

我希望AngularJs获取生成的代码，重新编译模板并处理范围。

问题是我无法正常工作。我理解，因为ng-click位于控制器块内部，所以它不是由指令隔离范围拾取，而是由父控制器拾取。 相反，我想要反过来......在serversideDemo链接中选择onClickButtonInDirective范围函数

我创造了一个最好的解释我的问题的jsfiddle，旨在清楚地展示工作＆＃34;传统＆＃34;单独加载模板的方法（有效）将其与服务器端方式进行比较。

https://jsfiddle.net/stevewbrown/beLccjd2/3/

这样做的最佳方式是什么？

谢谢！

Answer 1

您的代码中存在两个主要问题

1-指令名称和dom元素不匹配，dom元素中缺少-

app.directive('serverSideDemo', function() {

使用<server-side-demo color="blue">代替<serverside-demo color="blue">

2-你需要编译server-side-demo dom的html代码和链接函数中的指令范围

$compile(element.contents())(scope);

工作jsfiddle

Answer 2

使用templateUrl代替template从服务器获取指令内容：

app.directive('serverSideDemo', function() {

  return {
    restrict: 'AE',
    scope: {
      color: '='
    },
    templateUrl: 'link/that/returns/html/content',
    link: function(scope, element, attrs) {
      scope.onClickButtonInDirective = function() {
        console.log('You clicked the button in the serverside demo')
        scope.color = scope.color === 'blue' ? 'red' : 'blue';
      }

    }
  };

});

有关详细信息，请查看angular docs

点击运行＆＃39;在指令的孤立范围内

2 个答案: