javascript - 将控制器变量值传递给AngularJS中的指令

Question

我正在研究从SO 上的这个答案中找到的小提琴

我已经通过以下方式针对我的情况修改了小提琴：

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.func = function() {
     $scope.name = "Test Name";
    } 
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div>{{name}}</div>",
      scope: {
        name: '='
      },
      link: function(scope, element, attrs) {  
        alert(scope.name);
      }

    }
  });

基本上，我试图将变量值从范围函数传递给指令 - 但警报消息显示一个未定义的值。

关于这里出了什么问题的任何想法？如何在 $scope.func 函数中传递存储在 $scope.name 中的值并将其传递给指令？

更新的小提琴可以在这里找到。

标签： javascriptangularjs

Answer 1

问题是您在控制器的函数中定义名称，并且该函数永远不会被调用。改成这个。

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.name = "Test Name";
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div>{{name}}</div>",
      scope: {
        name: '='
      },
      link: function(scope, element, attrs) {  
        alert(scope.name);
      }

    }
  });

<div ng-app="sampleApp" ng-controller="myCtrl">

  <div my-directive name="name">
  </div>
</div>