controller内で$scopeを使わない方法
・質問
controller内でthisを使うをうまくいきません(下記)。なぜでしょうか。
// -------------------------------------------------
// Employeenumber
function empnumberController(employee, employeeFactory) {
this.empInstance = employee;
this.employeeFactoryInstance = employeeFactory;
}
// -------------------------------------------------
// Employeescale
function empscaleController(employeeFactory){
this.employeeFactoryInstance = employeeFactory;
}
$scopeを使うと上手くいきます(下記)
// -------------------------------------------------
// Employeenumber
function empnumberController($scope,employee, employeeFactory) {
$scope.empInstance = employee;
$scope.employeeFactoryInstance = employeeFactory;
}
// -------------------------------------------------
// Employeescale
function empscaleController($scope,employeeFactory){
$scope.employeeFactoryInstance = employeeFactory;
}
$scopeはあまり使いたくないので、thisでうまく良くにはどうしたらいいでしょうか。
・経緯
親子関係にないcontroller間で値を加工して渡すプログラムを書きました。
従業員数を入力して、規模を返すものです。
// Employee Factory
app.factory("employeeFactory", function (employee) {
var empInstance = employee;
return {
getemployeeFullName: function() {
if (0 < empInstance.Number && empInstance.Number <= 10){
empInstance.Scale = "1~10人";
} else if(10 < empInstance.Number && empInstance.Number <= 30){
empInstance.Scale = "11~30人";
} …中略… else if(1000 < empInstance.Number){
empInstance.Scale = "1,001人~";
} else{
empInstance.Scale = "";
}
return empInstance.Scale;
}
};
});
app.value("employee", { Number:"", Scale:""});
//component
app.component('myEmplyeenumber', {
bindings: …中略…
,controller: empnumberController
,template: '<input type="number" ng-model="empInstance.Number">'
});
app.component('myEmplyeescale', {
bindings: …中略…
,controller: empscaleController
,template: '{{employeeFactoryInstance.getemployeeFullName()}}'
});
・試してみたこと
controller内で
console.dir($scope);
と
console.dir(this);
をしてみると全く別物でした。
どうぞよろしくお願いします。