帶角度父角色服務的範圍

我對角度的一些概念，特別是變量和範圍的流程進行了討論。帶角度父角色服務的範圍

我想要做的是在子控制器中設置一個變量並將其傳遞給父範圍。考慮一個簡單的例子：

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.hex = hexafy.myFunc(17);  
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 

} 

module.service('hexafy', function() { 
    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
});

然後我加價如下：

{{hex}} 

<section data-ng-controller="listingsViewController">....</section>

計算由子控制器處理，但你可以看到我想要將變量傳遞給「父」。我已閱讀了「父」範圍，但我知道這不是最佳做法，所以我試圖使用一項服務。我哪裏錯了？

來源

2017-02-05 Alan A

有許多不同我實際上會推薦以下方法（在父級和子級控制器中使用常見的$scope object variable），而不是使用服務，因爲這是更容易和更清晰的方法。

然後，您可以使用$scope.shareValue.hex訪問父控制器中的hex值。

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.shareValue.hex = hexafy.myFunc(17); 
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    var shareValue = { 
     hex: '' 
    }; 
    $scope.shareValue = shareValue; 
}

=========================================== =========================== 使用服務被更新：
請參考下面的評論Matthew Cawley的帖子。

來源

2017-02-05 14:37:06 whyyie

我不推薦使用$ parentScope，因爲它可能會在以後導致問題。我試着按照上面的建議嘗試，但我也很好奇，看看服務是如何工作的。我找不到任何示例，並繼續圍繞着圈 –

@AlanA我已更新了服務的代碼 – whyyie

@whyyie您可以從服務中獲取值，而不用點擊或使用'$ emit'，在您的代碼，如果你把你的函數放在視圖中的表達式{{clickHere（）}}中，它會在它改變時執行。 –

您應該首先在您的子控制器中使用服務函數設置值，然後在您的父控制器中使用父控制器中的getvalue函數。

您的setvalue和getvalue函數應該在服務中。

控制器代碼

app.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.childValue = "Value in child controller" 
    hexafy.setValue($scope.childValue);  
} 

app.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    $scope.parentValue = hexafy.getValue() 
}

服務代碼

app.service('hexafy', function() { 

    var value = ""; 
    this.setValue = function(val) { 
    value = val 
    }, 

    this.getValue = function() { 
    return value; 
    } 


    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
});

HTML代碼

<div ng-controller="childController"> 
     <h2>Child controller</h2> 
     {{childValue}} 

    </div> 

    <div ng-controller="parentController"> 
     <h2>Parent controller</h2> 
     {{parentValue}} 

    </div>

看看工作plunker

來源

2017-02-05 14:25:52

真棒謝謝我與get/set方法一起工作 –

帶角度父角色服務的範圍

回答

相關問題