AngularJS 指令：范围

Question

我有下面的例子：

HTML:

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>Result is {{result}}!</p>
    <output-content data="name"></output-content>
</body>

JavaScript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.result = "no";

    $scope.changeLabel = function() {
        $scope.result = 'yes';
    }
});

app.directive('outputContent', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'outputContent.html',
        scope: {
            data: '=',
            result: '='
        },
        controller: 'MainCtrl'
    };

});

outpuContent.html:

<div>
    {{data}}
    <button ng-click="changeLabel()">Change</button>
</div>

Plunker 是：http://plnkr.co/edit/uzSrGcyQLeRNEIH7IXBf

我希望单击 'Change' 按钮时的结果是 'yes'。

没用。

你能解释一下如何编写指令吗？

此致。

Answer 1

在指令中，删除范围。现在像这样..这将是可行的..

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    controller: 'MainCtrl'
  };

});

Answer 2

不需要范围。请删除范围。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.result = "no";

  $scope.changeLabel = function() {
    $scope.result = 'oh yeah';
  }
});

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
      controller: 'MainCtrl'
  };

});

Answer 3

您在指令范围内定义了变量，但没有传递它。只是通过 "result" 进入指令。例如：

<output-content data="name" result="result"></output-content>

我分叉了你的 plunkr：http://plnkr.co/edit/12FXjUsVdPXhPIQ1mlHt?p=preview

希望对您有所帮助。

AngularJS 指令：范围

AngularJS directive: scope

scope

directive

angularjs