使用「Controller as」語法向控制器添加指令

-1

我一直在學習有關「new」「Controller as」語法的類型。雖然我發現語法的可讀性更清晰，有時做一個相對簡單的事情，但它會變得更加複雜，例如向Controller添加Directive時。使用「Controller as」語法向控制器添加指令

這個簡單的示例如何用「Controller As」語法完成？

Plunk Sample

我想是這樣的：

app.directive('myCustomer', myCustomer); 

function myCustomer() { 
    return { 
     restrict: 'E', 
     scope:{ customer: '=info'}, 
     //templateUrl: 'my-customer.html', 
     template:'Name: {{vm.customer.name}} Address: {{vm.customer.address}}', 
     controller: Controller, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 
    }

我不太得到它，就像常規的「$範圍」語法工作。也許我錯過了一些東西。

注：該示例使用角1.5.5

來源

2016-05-23 gugol

您的問題正文中的代碼暗示您的指令模板具有相應的控制器，但您的plunker沒有。那麼，哪些是你想要我們看的？如果您的指令模板具有相應的控制器，那麼代碼在哪裏？ – jbrown

對不起，我剛剛糾正它。 Plunk是來自Angular官方文檔的一個例子，我試着用[控制器作爲]語法來編寫代碼[John Papa style guide]（https://github.com/johnpapa/angular-styleguide/blob/master/a1/ README.md＃風格y075）。 – gugol

可能的重複。看到這個問題：http://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive –

檢查這個叉子的普拉克的：https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview

.directive('myCustomer', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     customerInfo: '=info' 
     }, 
     controllerAs: 'vm', 
     controller: ['$scope', function(scope){ 
     console.log(scope.customerInfo); 
     }], 
     templateUrl: 'my-customer-iso.html' 
    }; 
    });

UPD

代碼應該是像這樣：

(function(angular) { 
    'use strict'; 
angular.module('docsIsolateScopeDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; 
    $scope.igor = { name: 'Igor', address: '123 Somewhere' }; 
    }]) 
    .directive('myCustomer', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     customerInfo: '=info' 
     }, 
     controllerAs: 'vm', 
     bindToController: true, //the missing line!! 
     controller: 'dirCtrl', 
     templateUrl: 'my-customer-iso.html' 
    }; 
    }) 
    .controller('dirCtrl', ['$scope', dirCtrl]); 

    function dirCtrl() { 
    //var vm = this; //no need in this! 
} 

})(window.angular);

和

Name: {{vm.customerInfo.name}} Address: {{vm.customerInfo.name}}

模板

來源

2016-05-23 19:11:41 shershen

Plunk不適合我。無論如何，它不使用「控制器爲」語法。我附上的Plunk來自官方的角度文檔，並顯示了通常的「$ scope」語法。也許你沒有保存你的Plunk的最新版本。 – gugol

你能看到這個版本嗎？ https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview，檢查更新後的文章 – shershen

對不起@shershen，但它似乎你添加的代碼是無所事事。我刪除它，我把它作爲[原始版本]（https://plnkr.co/edit/KX5qfGuX7q1L8458i2Dh?p=preview）。無論如何，我需要用「Controller As」語法來完成。 – gugol

我din't管理從官方的角度文檔完全複製最初的例子。指令非常棘手，我錯過了有關隔離範圍「=」的重要內容。作爲原始文檔示例，我沒有通過帶「=」的指令從控制器獲取值。 @ shershen的答案是正確的。

(function() { 

    'use strict'; 
    var app= angular.module('docsIsolateScopeDirective', []); 

    app.controller('Controller', [function() { 
    var vm=this; 
    vm.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; 
    vm.igor = { name: 'Igor', address: 'Homeless' }; 

    vm.name="John"; 
    }]); 

    app.directive('myCustomer', function() { 
    return { 
     restrict: 'E', 
     scope: { 

     }, 
     templateUrl: 'my-customer-iso.html', 
     controller: 'Controller', 
     link: function(scope, elem, attr, ctrl) { 
       var variableName=attr.info; 
       scope.customerInfo=ctrl[variableName]; 
      } 
    }; 
    }); 

})();

這是final plunk。

來源

2016-05-24 10:37:05 gugol

使用「Controller as」語法向控制器添加指令

回答

相關問題