问题描述
在指令中编译了一个模版，其中的ng-repeat的作用域里有item数据，但是双花括号不能取到，ng-repeat的作用域的$parent都是directive的scope,但花括号插值失败，不明其中的原因，求解，代码如下
<!DOCTYPE html><html><head> <title></title> <script src='https://cdn.bootcss.com/angular.js/1.3.13/angular.js'></script> <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script></head><body ng-app=’app’ ng-controller=’app’> <compile-scope tpl=' <span>我是bind---</span><p ng-bind=’data.somevalue’></p> <span>我是括号---</span><p>{{data.somevalue}}</p> <ul ng-repeat=’item in data.list’ ng-click=’checkscope(this)’> <li><span>我是bind---</span><span ng-bind=’item.value’></span>,<span ng-bind=’item.val’></span></li> <li><span>我是括号---</span>{{item.value}},{{item.val}}</li> </ul> ' twowaybinding='{data:data,checkscope:checkscope}'></compile-scope></body></html><script>angular.module(’app’,[]).controller(’app’,function($scope){ console.log(’i am scope from ctrler’,$scope); $scope.checkscope = function(scope){console.log(scope) } $scope.data = { somevalue : ’somevalue’, list:{ a:{value:’i am value1 from list’,val:’i am val1 from list’}, b:{value:’i am value2 from list’,val:’i am val2 from list’}, } }}).directive(’compileScope’,function($timeout, $compile){ return{restrict:’E’,scope:{ tpl:’@’, twowaybinding:’=’},template:’’,link:function(scope, ele, attr){ angular.forEach(scope.twowaybinding, function(value, key){scope[key] = value;$timeout(function(){ scope.$watch(function(){return scope[key]; },function(){scope.$parent[key] = scope[key] },true) scope.$parent.$watch(function(){return scope.$parent[key]; },function(v){scope[key] = scope.$parent[key]; },true)}) }); $timeout(function(){var cpl = $compile(scope.tpl)(scope); ele.html(’’); ele.append(cpl) })} }})</script>
问题解答
回答1：看起来是因为tpl里的花括号{{}}不知道因为什么原因被angular删掉了！！好奇怪！！
我的理解是，如果作为@处理，那里面的字符串里如果包含了{{}}，那这本身就是个表达式，所以angular会在当前controller的$scope里寻找item.value和item.val变量并替换{{}}里的内容，替换后的结果，才是你在directive里取到的scope.tpl，那这里面自然已经没有{{ item.value }}等内容了
要不你换个方式吧：
<!DOCTYPE html><html><head> <title></title> <script src='https://cdn.bootcss.com/angular.js/1.3.13/angular.js'></script> <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script></head><body ng-app=’app’ ng-controller=’app’> <compile-scope tpl='’<span>我是bind---</span><p ng-bind=’data.somevalue’></p><span>我是括号---</span><p>{{data.somevalue}}</p><ul ng-repeat=’item in data.list’ ng-click=’checkscope(this)’><li><span>我是bind---</span><span ng-bind=’item.value’></span>,<span ng-bind=’item.val’></span></li><li><span>我是括号---</span>{{item.value}},{{item.val}}</li></ul>’' twowaybinding='{data:data,checkscope:checkscope}'></compile-scope></body></html><script>angular.module(’app’,[]).controller(’app’,function($scope){ console.log(’i am scope from ctrler’,$scope); $scope.checkscope = function(scope){console.log(scope) } $scope.data = { somevalue : ’somevalue’, list:{ a:{value:’i am value1 from list’,val:’i am val1 from list’}, b:{value:’i am value2 from list’,val:’i am val2 from list’}, } }}).directive(’compileScope’,function($timeout, $compile){ return{restrict:’E’,scope:{ tpl:’=’, twowaybinding:’=’},template:’’,link:function(scope, ele, attr){ angular.forEach(scope.twowaybinding, function(value, key){scope[key] = value;$timeout(function(){ scope.$watch(function(){return scope[key]; },function(){scope.$parent[key] = scope[key] },true) scope.$parent.$watch(function(){return scope.$parent[key]; },function(v){scope[key] = scope.$parent[key]; },true)}) }); $timeout(function(){ console.log(scope.tpl);var cpl = $compile(scope.tpl)(scope); ele.html(’’); ele.append(cpl) })} }})</script>
