Question

我想使用一个指令在我的前端有一些点击编辑功能。这是我正在使用的指令：http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/

'use strict';

angular.module('jayMapApp')
  .directive('clickToEdit', function () {
    return {
      templateUrl: 'directives/clickToEdit/clickToEdit.html',
      restrict: 'A',
      replace: true,
      scope: {
        value: '=clickToEdit',
        method: '&onSave'
      },
      controller: function($scope, $attrs) {
        $scope.view = {
          editableValue: $scope.value,
          editorEnabled: false
        };

        $scope.enableEditor = function() {
          $scope.view.editorEnabled = true;
          $scope.view.editableValue = $scope.value;
        };

        $scope.disableEditor = function() {
          $scope.view.editorEnabled = false;
        };

        $scope.save = function() {
          $scope.value = $scope.view.editableValue;
          $scope.disableEditor();
          $scope.method();
        };
      }
    };
  });

我在指令中添加了第二个属性来在用户更改值然后更新数据库等之后调用方法。方法（'$ onSave'在这里）被称为罚款，但似乎父范围不是当我在指令结束时调用方法时更新了。有没有办法调用方法，但确实更新了父范围？

提前致谢，迈克尔

Answer 1

我相信你应该在链接函数中创建附加函数：

看一下这段代码：
http://plnkr.co/edit/ZTx0xrOoQF3i93buJ279?p=preview

app.directive('clickToEdit', function () {
    return {
      templateUrl: 'clickToEdit.html',
      restrict: 'A',
      replace: true,
      scope: {
        value: '=clickToEdit',
        method: '&onSave'
      },
      link: function(scope, element, attrs){
        scope.save = function(){
          console.log('save in link fired');
        }
      },
      controller: function($scope, $attrs) { 
        $scope.view = {
          editableValue: $scope.value,
          editorEnabled: false
        };

        $scope.enableEditor = function() {
          $scope.view.editorEnabled = true;
          $scope.view.editableValue = $scope.value;
        };

        $scope.disableEditor = function() {
          $scope.view.editorEnabled = false;
        };

        $scope.save = function() {
          console.log('save in controller fired');
          $scope.value = $scope.view.editableValue;
          $scope.disableEditor();
          $scope.method();
        };
      }
    };
  });

我之前没有在控制器内声明过这些功能，但我不明白为什么它不起作用。

虽然这个问题/答案解释了它Link vs compile vs controller

根据我的理解：
控制器用于在指令实例之间共享数据，而不是“链接”将作为回调运行的函数。

Answer 2

正在调用该方法，但angular没有意识到它需要运行摘要周期来更新控制器范围。幸运的是，您仍然可以从隔离范围内触发摘要，只需将调用包装到方法中：

$scope.$apply($scope.method());

angular.js指令双向绑定范围更新

2 个答案: