从指令更新控制器范围变量

Question

我想通过包含其内容来创建一个行为类似于容器的指令。我的 html 看起来像这样

<test>
    <input type="text" ng-model="name" />
    <button ng-click="alertName()">Alert</button>
</test>

控制器和指令是这样的

angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    $scope.name = 'Eric Cartman';

    $scope.alertName = function() {
      alert($scope.name);
    };
  })
  .directive('test', function() {
    return {
      restrict: 'E',
      template: '<div ng-transclude></div>',
      transclude: true,
      replace: true,
      link: function($scope, elem, attr, ctrl) {

      }
    };
  });

当页面加载时，我在文本框中看到 'Eric Cartman'，当我单击 'Alert' 按钮时，我在对话框中看到 'Eric Cartman'。到这里一切都很好。

问题是当我在文本框中更改名称并点击 'Alert' 按钮时它仍然提示 'Eric Cartman'。我哪里错了？

Here is the Plunker

Answer 1

这是由于范围的原型继承和绑定变量是 "top level"（即 ng-model="name"，而不是 ng-model="model.name"）。

只需将值包装在一个对象中：

// controller:
$scope.model = { name: 'Eric Cartman' };
// do not forget the alert!

当然要绑定好:

<input type="text" ng-model="model.name" />

原型继承是一个初接触人会比较迷惑的话题；我什至没有尝试在这里解释这个概念，网络上有很多资源。您可以研究它或相信我的话，永远不要使用 "top-level" 双向绑定!

从指令更新控制器范围变量

Updating controller scope variable from directive

angularjs

angularjs-directive

angularjs-scope