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>