

・質問  
controller内でthisを使うをうまくいきません（下記）。なぜでしょうか。

[code]

    // -------------------------------------------------
    // Employeenumber
    function empnumberController(employee, employeeFactory) {
        this.empInstance = employee;
        this.employeeFactoryInstance = employeeFactory;
    }
    
    // -------------------------------------------------
    // Employeescale
    function empscaleController(employeeFactory){
        this.employeeFactoryInstance = employeeFactory;
    }
    
[/code]

$scopeを使うと上手くいきます（下記）

[code]

    // -------------------------------------------------
    // Employeenumber
    function empnumberController($scope,employee, employeeFactory) {
        $scope.empInstance = employee;
        $scope.employeeFactoryInstance = employeeFactory;
    }
    
    // -------------------------------------------------
    // Employeescale
    function empscaleController($scope,employeeFactory){
        $scope.employeeFactoryInstance = employeeFactory;
    }
    
[/code]

$scopeはあまり使いたくないので、thisでうまく良くにはどうしたらいいでしょうか。

・経緯  
親子関係にないcontroller間で値を加工して渡すプログラムを書きました。  
従業員数を入力して、規模を返すものです。

[code]

    // 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()}}'
    });
    
[/code]

・試してみたこと  
controller内で  
console.dir($scope);  
と  
console.dir(this);  
をしてみると全く別物でした。

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


CC BY-SA 3.0
2017-07-21T08:31:55.703
36563
2017-07-24T08:48:55.603
24521
question
angularjs
controller内で$scopeを使わない方法


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

[code]

    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>'
      });
    });
    
[/code]

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


CC BY-SA 3.0
2017-07-24T08:48:55.603
36631
2017-07-24T08:48:55.603
20272
36563
answer