Question

我希望ng-click更改控制器范围变量'controllerLabel'的值。在不使用控制器范围功能的情况下实现这一目标的最佳方法是什么？

HTML：

<div ng-app="app">
  <div ng-controller="Ctrl">
      <p>{{controllerLabel}}</p>     
     <my-template></my-template>
  </div>

    <!-- my-template.html -->
    <script type="text/ng-template" id="my-template.html">
        <div ng-repeat="clickLabel in clickLabels">
            <label ng-click="controllerLabel = {{clickLabel.text}}">{{clickLabel.text}}</label>
        </div>
    </script>
</div>

JavaScript的：

angular.module('app', [])
    .controller('Ctrl', function Ctrl1($scope) {
        $scope.controllerLabel = 'Default text';
        $scope.clickLabels = [
            {'text':'Hello'},
            {'text':'World'},
        ];
    })
    .directive('myTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'my-template.html'
        };
    });

JSFiddle

Answer 1

您可以将link添加到指令并写为：

.directive('myTemplate', function() {
        return {
            restrict: 'E',
            link: function (scope) {

            scope.onClick = function (clickLabel) {
                  scope.controllerLabel = clickLabel.text;
              }
        },
            templateUrl: 'my-template.html'
        };
    });

<强> HTML

<script type="text/ng-template" id="my-template.html">
        <div ng-repeat="clickLabel in clickLabels">
            <label ng-click="onClick(clickLabel)">{{clickLabel.text}}</label>
        </div>
    </script>

实际上你可以像@Alborz一样写，但我想在链接中添加方法，从HTML调用会更清晰，更容易调试。

演示 Fiddle

Answer 2

我更新了你的小提琴; Updated fiddle

您需要使用controllerLabel作为对象属性来与控制器共享对象。

angular.module('app', [])
    .controller('Ctrl', function Ctrl1($scope) {
        $scope.label = {};
        $scope.label.controllerLabel = 'Default text';
        $scope.clickLabels = [
            {'text':'Hello'},
            {'text':'World'},
        ];
    })
    .directive('myTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'my-template.html'
        };
    });

模板：请注意label.controllerLabel = clickLabel.text

<div ng-repeat="clickLabel in clickLabels">
    <label ng-click="label.controllerLabel = clickLabel.text">{{clickLabel.text}}</label>
</div>

如何在不使用函数的情况下从指令中的ng-repeat修改控制器范围？

2 个答案: