Question

我半信半疑地保证，由于没有对类似问题进行彻底的研究，这个问题将被投票否决。问题如下

的script.js

'use strict';
angular.module('myApp', [])
.directive('infoDirective', function(){
return {
    scope: { test: '='},
    controller: function($scope){console.log("array-info", $scope); },
};
});

angular.module('myApp')
.controller('myCtrl', function($scope) {

  console.log($scope);
});

的index.html

<div class='col-md-12'>

    <h1 >Test</h1>
    <div info-directive test="'alpha'">Variable test = {{ test }}</div>

</div>

输出

Test
Variable test =

即使与标记为array-info的日志关联的日志确实显示范围变量具有值为＆＃34; alpha＆＃34;的测试变量，html表达式也不会评估为任何内容，如上所示

我已经尝试过阅读范围继承 - 但我不认为我完全理解了调试此问题的差异/我正在查看错误的主题来调试它。

任何帮助将不胜感激！ Plunkr

由于 SUD

Answer 1

您尝试做的是将内容转换为指令。为此，您需要在模板中添加transclude属性和ng-transclude标记。

此外，您在控制器的范围内看到{{test}}，而不是指令范围。指令的范围位于指令的template|templateUrl属性中。

由于{{test}}位于控制器范围内，因此您需要向控制器范围添加实际的test属性才能使其正常工作。

http://plnkr.co/edit/nCZqjHqm9VQqISOnCdNu?p=info

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: '<ng-transclude></ng-transclude>', //infoDirective $scope
        transclude: true
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {
      $scope.test = 'alpha';
      console.log($scope);
    });


<div class='row'>
        <div class='col-md-12'>

          <h1 >Test</h1>
          <div info-directive test="test">
            Variable test = {{ test }} <!-- myCtrl $scope -->
            </div>

        </div>
      </div>

如果您想显示指令范围的test属性，请将指令标记之间的内容移动到指令的template：

http://plnkr.co/edit/sKCz3OpVPTZP9OJb0U8d?p=preview

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: 'Variable test = {{ test }}'
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {

      console.log($scope);
    });

编辑：当然，您也可以将指令与模板和转换结合使用。

http://plnkr.co/edit/QviGc8w2M97ZhU8iyDjj?p=preview

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: '<div>Variable test = {{test}} in infoDirective</div><ng-transclude></ng-transclude>',
        transclude: true
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {
      $scope.test = 'alpha';
      console.log($scope);
    });


<div info-directive test="test">Variable test = {{ test }} from myCtrl</div>

Answer 2

您需要在Html中添加<div ng-controller="myCtrl">

这样的事情：

<div ng-controller="myCtrl">

<h1 >Test</h1>
<div info-directive test="'alpha'">Variable test = {{ test }}</div>

请查看演示：http://jsfiddle.net/Lvc0u55v/7056/

对于Plunkr演示，您需要使用正确的角度版本：

更改

<script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>

到

<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>

范围变量inside指令不显示值

2 个答案: