AngularJS 编译模板并在 Showdown 扩展中使用它

Question

我正在尝试在我的 Angular 应用程序中创建一个 Showdown 扩展，它将显示范围变量。我能够设置它以足够容易地显示基本范围变量，但现在我想把它带到我可以使用 ng-repeat 结果的地方，除了 [=13 之外我什么也得不到=] 显示。

到目前为止，这是我的控制器：

app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
    $scope.machines = [
        { abbv: 'DNS', name: 'Did Not Supply' },
        { abbv: 'TDK', name: 'The Dark Knight' },
        { abbv: 'NGG', name: 'No Good Gofers'}
    ];
    $scope.machine = $scope.machines[0];

    $scope.machine_list = $compile('<ul><li ng-repeat="m in machines">{{m.abbv}}: {{m.name}}</li></ul>')($scope);
  $scope.md = "{{ machine_list }}";

    var scopevars = function(converter) {
        return [
            { type: 'lang', regex: '{{(.+?)}}', replace: function(match, scope_var){
                scope_var = scope_var.trim();

                return $scope.$eval(scope_var);
            }}
        ];
    };
    // Client-side export
    $window.Showdown.extensions.scopevars = scopevars;
}]);

笨蛋：code so far

我觉得我必须接近，但现在我不知道我是否在完全错误的轨道上，或者这是摊牌的事情还是 angular 的事情或者什么。

Answer 1

我意识到我正在与我这样做的方式抗争 Angular（并且严重失去了安静）。 DOM 在控制器中是一个禁忌。现在我有点生气，因为一旦我开始正确思考并查看指令，它是多么容易。

现在，我不再尝试在控制器中进行编译和所有操作，而是将 $compile 服务包含在我正在使用的指令中，因此：

htmlText = converter.makeHtml(val);
element.html(htmlText);

变成了：

htmlText = converter.makeHtml(val);
element.html(htmlText);
$compile(element.contents())(scope);

有了这个更改，我不再需要刚刚进行基本评估的扩展部分，因为它正在编译 {{ machine.name }} 会自动转换。

但这仍然让我无法指定变量来插入模板，只能指定变量。但是现在输出将通过 angular 进行编译，我可以将模板放在一个部分中，并使用扩展名将模式转换为 ng-include 有效。

新控制器代码：

app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
    $scope.machines = [
        { abbv: 'DNS', name: 'Did Not Supply' },
        { abbv: 'TDK', name: 'The Dark Knight' },
        { abbv: 'NGG', name: 'No Good Gofers'},
        { abbv: 'TotAN', name:'Tales of the Arabian Nights'}
    ];
    $scope.machine = $scope.machines[0];

  $scope.tpls = {
    'machinelist': 'partials/ml.html'
  };
  $scope.md = "{{machines.length}}\n\n{{include machinelist}}";

    var scopevars = function(converter) {
        return [
          { type: 'lang', regex: '{{include(.+?)}}', replace: function(match, val){
            val = val.trim();
            if($scope.tpls[val] !== undefined){
              return '<ng-include src="\''+$scope.tpls[val]+'\'"></ng-include>';
            } else {
              return '<pre class="no-tpl">no tpl named '+val+'</pre>';
            }
          }}
        ];
    };
    // Client-side export
    $window.Showdown.extensions.scopevars = scopevars;
}]);

当然还有the new plunkr

希望这对以后的人有所帮助

AngularJS 编译模板并在 Showdown 扩展中使用它

AngularJS compile a template and use it in Showdown extension

angularjs

showdown