angularjs将作用域数据从应用程序控制器传递到指令

agyaoht7 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(343)

尝试将某些作用域数据从我的应用程序控制器传递到指令时遇到问题
http://plnkr.co/edit/github:plnkr/starters/v1.4.0/templates/angularjs?open=lib%2fscript.js&deferrun=1&preview

(function () {
  'use strict';

  angular
    .module('app', [])
    .controller('HomeCtrl', ['$http', '$scope', HomeCtrl])
    .directive('services', [
      function () {
        return {
          restrict: 'E',
          scope: {
            testData: '='
          },
          template:
            '<h2 class="service-name">Test: {{testData}}</h2>' 
        };
      }
    ]);

  /**
   * Home controller.
   * @param {*} $scope
   */

  function HomeCtrl($http, $scope) {
    $scope.testData = 'name';

  }
})();

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="HomeCtrl">
      <services testData="testData"></services>
    </div>
  </body>
</html>

我没有定义scope“=”变量testdata，我可以使用{{testdata}}在应用程序中呈现它，但是当将它作为属性传递时，指令没有接收到值。

JavaScript angularjs angularjs-directive

来源：https://stackoverflow.com/questions/68463359/angularjs-passing-scope-data-from-app-controller-to-directive

1条答案

按热度按时间

wj8zmpe11#

下面是您的show代码示例modify，用于将范围数据传递给指令。

(function () {
  'use strict';

  angular
    .module('app', [])
    .controller('HomeCtrl', ['$http', '$scope', HomeCtrl])
    .directive('services', [
      function () {
        return {
          restrict: 'E',
          scope: {
            testData: '@testData'    //******************note here 
          },
          template:
            '<h2 class="service-name">Test: {{testData}}</h2>' 
        };
      }
    ]);

  /**
   * Home controller.
   * @param {*} $scope
   */

  function HomeCtrl($http, $scope) {
    $scope.testData = 'name';

  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

  <body ng-app="app">
    <div ng-controller="HomeCtrl">
      <!--  //******************note here  -->
      <services test-Data="Hello World!"></services>
    </div>
  </body>

赞(0）回复(0）举报 2021-09-29

我来回答

angularjs将作用域数据从应用程序控制器传递到指令

1条答案

相关问题

热门标签

最新问答