0

・質問
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);
をしてみると全く別物でした。

どうぞよろしくお願いします。

1 件の回答 1

1

componentモジュールでcontrollerを指定した場合に、thisに設定した値をテンプレート中で使用するには$ctrlが必要です。
参考:https://docs.angularjs.org/guide/component

var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  controller: function() {
    this.user = {name: 'world'};
  }
});
myMod.config(function($routeProvider) {
  $routeProvider.when('/', {
    template: '<home></home>'
  });
});

詳しくはcontrollerAsの記法を参照してください。

3
  • こちらの件、今thisにしたら上手くいきました。逆になぜうまくいかなかったのがよくわかりませんが。。routeProvider使ったことないです。教えていただいてありがとうございます。マニュアル読んで利用していきたいです。
    – SMY
    Commented 2017年8月3日 0:45
  • 解決されたようで何よりです。なぜthisでうまくいくのか理解できませんが…(thisに$scopeを代入したとかでしょうか)。また上記コードはangularのドキュメントから引用したもので、$rootProviderを使っていることに意図はなく、本題とも無関係です。controllerAsの記法が要点です。
    – maot
    Commented 2017年8月3日 1:29
  • 一番上のコードで動きました。他は変更していないです。入力した値を直接templateに結果を返すのではなく、今回はvalueに値を渡して、factoryで加工してインスタンスを返すという方法をとっているので、controllerAsに当たるものが、返されたインスタンスのプロパティに代わるのかな、と思いました。(理解が浅いので予想です。)
    – SMY
    Commented 2017年8月3日 2:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。