共享變量

我有幾個指令像共享變量

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

回答

相關問題