Question

两个问题：是否可以访问位于控制器中的showData（）函数，即使它不在指令中？我也在指令中放了一个，但它仍然没有警告？请告诉我我做错了什么。

 var myApp = angular.module('myApp', []);
        myApp.controller('productController', ['$scope',
            function($scope) {

                $scope.product1 = {
                    name: 'Phone',
                    price: '100',
                    stock: true
                };

                $scope.product2 = {
                    name: 'Ipad',
                    price: '1000',
                    stock: true
                };

                $scope.product3 = {
                    name: 'Laptop',
                    price: '800',
                    stock: false
                };

                $scope.showData = function() {
                    alert("Display Data");
                }


            }
        ]);

        myApp.directive('myInventory', function() {
            return {
                restrict: 'E',
                scope: {
                    name: '@',
                    price: '@'

                },
                template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>'
            };
            directive.link = function($scope, element) {
                $scope.showData = function() {
                    alert("Display Data");
                };
            }
            return directive;

        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-App="myApp">

    <div ng-controller="productController">
        <h1>{{product1.name}}</h1>
        <my-inventory name="{{product1.name}}" price="{{product1.price}}"></my-inventory>
        <h1>{{product2.name}}</h1>
        <my-inventory name="{{product2.name}}" price="{{product2.price}}"></my-inventory>
        <h1>{{product3.name}}</h1>
        <my-inventory name="{{product3.name}}" price="{{product3.price}}"></my-inventory>


    </div>


</body>

Answer 1

在你的指令中，你太早回来，所以你的一半代码没有执行。

myApp.directive('myInventory', function() {
      return {
        restrict: 'E',
        scope: {
          name: '@',
          price: '@'
        },
        template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>',
        link: function($scope, element) {
          $scope.showData = function() {
            alert("Display Data");
          };
        }
      });

您可以将showData从控制器传递到指令。

myApp.directive('myInventory', function() {
          return {
            restrict: 'E',
            scope: {
              name: '@',
              price: '@',
              showData: '&' // Add it to your scope like so
            },
            template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>',
            link: function($scope, element) {
              // Don't need showData() here anymore
            }
          });

使用您的函数调用您的指令

<my-inventory show-data="showData()" name="{{ something }}" price="{{ something }}"></my-inventory>

函数嵌套在指令中而不是警告

1 个答案: