Question

我想在这样的指令的模板函数中使用$ scope变量。换句话说，我想在指令内部生成指令模板，并使用$ scope variable。

帮我将模板功能连接到控制器。

directive("data", ['$compile', '$http', '$templateCache',function ($http,$rootScope) {
    return{
    link: function (scope, elem, attrs, ctrl) {
        scope.template = something // I want Generate template here
    },
    template:function(element , attrs){ 
        return $scope.template // I can't access scope here
    }
}

Answer 1

你无法访问模板函数中的作用域，如果你想以某种方式生成模板，然后在指令中呈现模板，我建议使用链接函数中的$compile service这样：

var a = angular.module('myApp', []);

a.controller('ctrl', function ($scope) {
    $scope.myTemplate = '<span class="custom-tpl"> my template </span>';
});

a.directive('dynamicTemplate', [ '$compile',

function ($compile) {
    'use strict';
    return {
        restrict: 'A',
        scope: {
            customTemplate: '='
        },
        link: function ($scope, $element, $attrs, $controller) {
            var compiledTemplate = $compile($scope.customTemplate)($scope);
            $element.html('').append(compiledTemplate);
        }
    };

}]);

你可以查看here

Answer 2

scope中的directives选项提供了一个独立的范围，用于从父控制器中删除范围问题，并提供可移植的指令并与控制器解耦。在您的方案中，您可以定义模板的隔离范围，如下所示：

JS代码：

directive("data", ['$compile', '$http', '$templateCache',function ($http,$rootScope) {
 return{
    restrict: 'EA',
    scope: {
      template: '='
    }
    template:function(element , attrs){ 
        return scope.template;
    }
}

<强> HTML：

<data template='something'></data>

这种隔离范围的方式为范围变量到DOM的单向或双向数据绑定提供了binding strategies ('@', '=')。在您的情况下，template元素中的data属性将是绑定到scope变量template的双向数据。

如何在指令模板中使用范围

2 个答案: