2015-05-13 68 views
3

我想發送帶有從app.controller到另一個指令控制器的功能模板的JSON對象。我決定發送這個變量作爲內部指令元素的屬性。問題是,對象,它是內部$attr.valueAtt在我的指令控制器爲"[object Object]",我不能讓它:發送帶有功能的JSON對象到另一個指令的控制器

我的代碼:

var value = (
    [{ 
    functionLabel:'Fun', 
    functionTemplate: function(param1,param2){ 
     alert(param1); 
    }, 
    functionParams: ['PARAM1','PARAM2'] 
    }]); 

然後我在控制器添加它作爲指令元素的屬性:

angular.element(document.getElementById('space-for-modals')) 
     .append($compile("<modal-dialog visible='true' data-backdrop='static' valueAtt='"+value+"'></<modal-dialog>")($scope)); 

並嘗試在我的指令控制器獲得 「價值」:

$scope.functions= $attrs.valueAtt; 

$scope.functions只是「[object Object]」。有沒有辦法將函數模板從一個控制器發送到另一個控制器以後再調用它?

+0

您可以在代碼示例中添加空格/換行符/換行符嗎? –

回答

3

問題是,當你做valueAtt='"+value+"'時,JavaScript將value轉換爲一個字符串 - 即"[object Object]"。您需要將對象存儲在作用域中,然後在HTML屬性中通過名稱引用它。事情是這樣的:

var scope2 = scope.$new(); 
    scope2.foo = [{ 
    label:'Fun', 
    fn: function(param1, param2){ 
     alert("Callback function says: " + param1) 
    }, 
    params: ['PARAM1', 'PARAM2'] 
    }]; 

    angular.element(document.getElementById('space-for-modals')) 
    .append($compile("<modal-dialog visible='true' data-backdrop='static' value-att='foo'>Modal dialog</<modal-dialog>")(scope2)); 

然後在你的模態對話框鏈接功能,您可以提領value-attr得到foo

link: function(scope, elem, attrs) { 
    scope.functions = scope[attrs.valueAtt]; 
} 

而且在對話框控制器,你可以訪問functions成員。請注意,這將不準備,直到鏈接函數被調用後,所以你需要使用一個表:

$scope.$watch('functions', function(functions) { 
    if (functions == null) 
     return; 
    var ft = functions[0]; 
    ft.fn.apply(null, ft.params); 
    }); 

Here's a demo

我必須說,像這樣編譯HTML有點奇怪 - 爲什麼不在你的指令聲明中使用模板呢?如果這是因爲您想將內容放在DOM的另一個級別上,請考慮使用service與它進行通信(基本上,您在共享單例對象上設置了一個字段)。另外,您可以使用isolate scope來避免自己綁定屬性。

服務可以存儲將由控制器觸發一個回調函數:

.service('modalService', [function() { 
    var proxy = function(message) { 
    proxy.callback(message); 
    }; 
    proxy.callback = function() {}; 
    return proxy; 
}]) 

如果注入到這兩個您的對話框,並觸發控制器,你可以在它們之間進行通信。模態對話框應該用自己的函數替換回調。 Here's another demo

+0

可能會是一個好主意,以實際展示如何設置範圍 –

+0

@NewDev完成的對象,謝謝 – z0r

+0

1。我是Angular的新成員,所以也許我錯了,但我想這也是var scope2 = scope。$ new();是一種靜態的,當我會在同一時間獲得兩個請求來顯示來自一個scope2.foo的模態窗口數據可能被第二個請求遮蔽 - 或者我應該爲每個模態窗口動態地創建分隔的scope3 scope4作用域? 2.獨立範圍的想法看起來很有趣,但是我可以像例子.controller('NaomiController',['$ scope',function($ scope))那樣動態地創建控制器嗎?或者它必須被硬編碼? – klahcim

0

Okej我暫停了這是轉換問題,但我實際上不能將「值」存儲在主要$ scope的靜態變量中,因爲我想用它來調用具有通用功能的模態窗口,這取決於存儲在「value 「這就是爲什麼我決定給」價值「作爲屬性。有沒有其他的選擇可以在視圖中保存「值」或者直接將它賦給指令控制器?

相關問題