angularjs 指令使用控制器作为 vm 而不是作用域答案

【问题标题】：angularjs directive use controller as vm instead of scopeangularjs 指令使用控制器作为 vm 而不是作用域
【发布时间】：2018-07-07 00:30:29
【问题描述】：

我正在尝试创建指令。我一直在遵循 john papa 自以为是的风格指南并将控制器用作 vm。不幸的是，当我尝试制定指令时，我不确定如何在不使用 $scope 而不是 vm 的情况下做到这一点。

（最后一个标签应该是 angularjs-styleguide 但我找不到，而且我没有足够的积分来制作新标签）

这里是 plunkr。 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
        };
    });

【问题讨论】：

标签： javascript angularjs angularjs-directive angular2-styleguide

【解决方案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
        };
    });

【讨论】：