自定义指令属性值没有进入templateUrl回调函数

时间:2014-07-14 11:21:31

标签: angularjs angular-directive

我想要帮助在templateUrl中获取价值。我已经经历了类似的问题Set templateUrl base on attribute in directive

我的目标

我想在从 HTML 调用指令时设置一个属性。该属性将具有json对象的动态值。我想在指令的templateUrl函数中使用这个属性。

您可以在此处看到更多了解我的问题 - jsfiddle

我想根据属性值渲染复选框或广播模板。

请帮忙。

我知道ng-include方法,所以请建议替代解决方案。

1 个答案:

答案 0 :(得分:2)

tempalteUrl函数无法访问

scope。在link功能中,您可以访问模板Url以及范围。我更改了您的代码here

angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope) {
    $scope.dynamicAttr = [
        {
            style:"stdRadio",
            label:"First Box"
        },
        {
            style:"stdCheck",
            label:"Second Box"
        }
    ];
}]).directive("dynamicComponent",['$compile','$http','$templateCache',function($compile, $http,$templateCache) {
    return {
        scope:{
            sourceData:"=sourceData"
        },
        restrict:"E",

        link: function (scope, element, attrs) {
            $http.get((scope.sourceData.style == "stdRadio")?"dynamicComponentRadio.html":"dynamicComponentCheckBox.html", {cache: $templateCache}).then(function(data){

         element.html(data.data);
         return $compile(element.contents())(scope);
            });

        }
    }
}]);