angularjs - Angularjs 指令隔离范围不起作用

Question

我正在构建一个 Angular 指令。我将属性绑定(bind)到指令中的隔离范围，例如

scope : {
   contentModel : '='
}

'use strict';

/**
 * Tc markdown directive
 */
var myapp = angular.module('myapp',[]);

myapp.directive('tcMarkdown',[function() {
  var directive = {};
  directive.restrict = 'E';
    directive.template = '<div><div class="row"><!--Content edit pane --><div class="col-md-12"><textarea class="form-control editor" ng-model="someobj.text.data"></textarea></div></div></div>{{contentModel}}';
  directive.scope = {
    contentModel : '='
  };

  directive.link = function(scope, element, attrs) {
    scope.options = {selected : 0};
    scope.$watch(function() {
      return scope.options.selected;
    }, function(newVal) {
      if(newVal===1) {
        scope.buttonCaption = {text : 'Edit'};
      } else if(newVal === 0) {
        scope.buttonCaption = {text : 'Preview'};
      }
    });
  };
  return directive;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<data-tc-markdown content-model="content"></data-tc-markdown>
</div>

双向绑定(bind)不起作用。

当我在 textarea 中输入时，模型没有更新。

我错过了什么？

Answer 1

我不明白您如何将内部 contentModel 绑定(bind)到您的 textarea。

这是一个 updated working fiddle .

我用 contentModel 替换了分配给 ng-model 的 someobj.text.data:

  myapp.directive('tcMarkdown',[function() {
  var directive = {};
  directive.restrict = 'E';
    directive.template = '<div><div class="row"><!--Content edit pane --><div class="col-md-12"><textarea class="form-control editor" ng-model="contentModel"></textarea></div></div></div>';
  directive.scope = {
    contentModel : '='
  };

  directive.link = function(scope, element, attrs) {
    scope.options = {selected : 0};
    scope.$watch(function() {
      return scope.options.selected;
    }, function(newVal) {
      if(newVal===1) {
        scope.buttonCaption = {text : 'Edit'};
      } else if(newVal === 0) {
        scope.buttonCaption = {text : 'Preview'};
      }
    });
  };
  return directive;
}]);

然后我拉出 {{contentModel}} 以确保 {{content}} 在外部范围内绑定(bind):

<div ng-app="myapp">
<data-tc-markdown content-model="content"></data-tc-markdown>
    {{content}}
</div>

这似乎有效。