Angular.js指令隔离范围不起作用

Question

我正在构建一个角度指令。 我绑定属性，以隔离范围，指令就像

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>

的双向绑定是行不通的。

当我在textarea中键入模型没有更新。

我错过了什么？

Answer 1

我不明白你是如何将contentModel与textarea联系在一起的。

这是updated working fiddle。

我更换了someobj.text.data分配给ng-model与contentModel：

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}}结合在外部范围：

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

这似乎工作。

Answer 2

“内容”变量应该定义在指令的外部范围内。例如，请参阅下面的内容：我在外部控制器上定义了content1和content2。这些包含这些值本身。

http://jsfiddle.net/jajtzyhh/3/

var myapp = angular.module('myapp',[]).controller('MyController', ['$scope', function($scope) { 
    $scope.content1 = 'Hello'; 
    $scope.content2 = 'World'; 
}]); 


<div ng-app="myapp"> 
    <div ng-controller="MyController"> 
     <data-tc-markdown content-model="content1"></data-tc-markdown> 
     <data-tc-markdown content-model="content2"></data-tc-markdown> 
    </div> 
</div>