Директива angularjs использует контроллер как vm вместо области видимости

Question

Я пытаюсь создать директиву. Я следовал за самоуверенным руководством по стилю Джона Папы и использовал контроллер в качестве виртуальной машины. к сожалению, когда я пытаюсь создать директиву, я не уверен, как это сделать, не используя $scope вместо vm.

(последний тег должен указывать angularjs-styleguide, но я не смог его найти, и у меня недостаточно очков для создания нового тега)

вот планкр. https://plnkr.co/edit/DYTJURgaLd0QadcCSPFW?p=preview

<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="./script.js"></script>
<script src="./directive.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl as vm">
       <div unordered-list="products" list-property="price | currency"></div>
       <!-- this does not work
       <div unordered-list="vm.products" list-property="price | currency"></div>
       -->
    </div> 
</div>

контроллер

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

  myCtrl.$inject = ['$scope'];

   function myCtrl($scope){
       /* jshint validthis: true */
       var vm=this;
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
        ];

        vm.products =  [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
        ];
   } 

})();

директива

angular.module("myApp")
    .directive("unorderedList", function () {
        return {
            link: function (scope, element, attrs) {
                scope.data = scope[attrs["unorderedList"]];
            },
            restrict: "A",
            template: "<ul><li ng-repeat='item in data'>"
            + "{{item.price | currency}}</li></ul>",
            replace: true
        };
    });

Answer 1

Если вы укажете scope: { data: '=unorderedList' } в вашей директиве angular автоматически вытянет значение vm.products в сферу действия директивы, и она будет доступна под data переменная. Кроме того, нет необходимости в link() функция.

angular.module("myApp")
    .directive("unorderedList", function () {
        return {
            scope: { data: '=unorderedList' },
            restrict: "A",
            template: "<ul><li ng-repeat='item in data'>"
            + "{{item.price | currency}}</li></ul>",
            replace: true
        };
    });