共享变量

我有几个指令像共享变量

app.directive('navContent', function() { 
return { 
    restrict: 'E', 
    scope: { 
     content: "=" 
    }, 
    templateUrl: '../../' + template + '/regions/nav.html', 
} 
}); 


app.directive('headerContent', function() { 
return { 
    restrict: 'E', 
    scope: { 
     content: "=" 
    }, 
    templateUrl: '../../' + template + '/regions/header.html', 
} 
});

都需要在templateURL模板变种。

我有一个函数试图没有成功

var siteID = angular.element('head').data('site-id'); 
$http.get('/api/sites/' + siteID) 
    .success(function(site) { 
     var template = site.template; 
     }) 
    .error(function(data) { 
     console.log('Error: ' + data); 
    }); 
};

的siteID是DOM：

<head data-site-id="123456">

和site.template应该从网站模式返回模板

任何帮助，将不胜感激

来源

2015-04-28 ZeGregg

为什么你的'site.template'不在范围内的任何原因？ –

也不合理把'template'作为数据属性，而不仅仅是'site-id'？ – charlietfl

不是真的！你怎么看？我不知道如何使用超时获取值 – ZeGregg

使用$rootScope共享数据，如从@Edward诺尔斯的答案，是完全合法的伟大工程。

但是，通过将数据放在$rootScope上，您可以在应用程序中将该数据放在每个其他$scope上。这可能并不理想（可变冲突，打破封装，单元测试更脆弱等）。

共享数据的另一种方式是使用Angular服务/工厂。这将数据放入可以注入到所有控制器/指令中的内容。

app.service('SharedData', function() { 
    var service = { 
    foo: 'bar', 
    baz: 'bip' 
    }; 

    return service; 

}); 


app.directive('myDirective', function(SharedData) { 
    // do something w/SharedData 
});

来源

2015-04-28 17:44:33

使用的服务也是一个贫穷的想法时，OP可以简单地得到从DOM的价值，没有情况下OP将需要设置这个值。 –

@EdwardKnowles好点。我认为我对使用'$ rootScope'过度反应并没有考虑OP的实际用例。对于一个永远不会改变使用服务的数据点可能会矫枉过正。使用服务往往会干扰代码，但在这种情况下，我们正在讨论一个单行（从DOM获取数据）...选择你的毒药:) –

你最好的选择将设置这个变量$rootScope。这将可用于您的所有指令。

编辑：用这个来代替：document.head.dataset.siteId

var siteID = angular.element('head').data('site-id'); 
$http.get('/api/sites/' + siteID).success(function(site) { 
    $rootScope.template = site.template; 
    }).error(function(data) { 
    console.log('Error: ' + data); 
    }); 
};

现在，您可以模板编译成指令动态。

app.directive('headerContent', function() { 
    return { 
    restrict: 'E', 
    scope: true, 
    link: function(scope, element, attrs){ 
     var linkFn; 
     var templateUrl = '../../' + scope.template + '/regions/header.html'; 

     $http.get(templateUrl).then(function(response) { 
     linkFn = $compile(response.data); 
     element.html(linkFn(scope)); 
     }); 
    } 
    } 
});

编辑：由于在评论中提到有很多这样的方式基本上有你想要得到的是data值到编译功能。您可以使用$rootScope，我不会在生产或服务中使用它。然而，数据不太可能会改变，所以你甚至可能会更好地使用类似的东西。

.directive('myDirective', function ($http) { 
     return { 
      restrict: 'E', 
      scope: true, 
      link: function(scope, element, attrs){ 
       var linkFn; 
       var templateUrl = '../../' + document.head.dataset.siteId + '/regions/header.html'; 
       $http.get(templateUrl).then(function(response) { 
        linkFn = $compile(response.data); 
        element.html(linkFn(scope)); 
       }); 
      } 
     } 
    });

来源

2015-04-28 17:24:13

在地点之间共享数据应该由服务/工厂完成。将数据附加到$ rootScope应该只作为最后的手段。 –

无论哪种方式，我的答案仍然存在，无论你想要设置它，常量，getter/setter，scope。然后在html上使用'$ compile'并将其设置为自身。 –

当然，还有一种方法可以创建一个变量并将其完全保持在角度以外。这并不是正确的:) –

您可以使用JavaScript通过document.head.dataset.siteId

工作示例抓住从HTML数据属性 - > http://jsbin.com/cijukinoca/1/edit?html,js,output听网络请求。它会显示Request URL: http://null.jsbin.com/123456/regions/header.html

app.directive('headerContent', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     content: "=" 
    }, 
    templateUrl: '../../' + document.head.dataset.siteId + '/regions/header.html', 
    } 
});

来源

2015-04-29 10:25:00

回答

相关问题