Question

我有Rails 4.2.4和Angular 1.4.8。

我正在尝试定义一个指令：

的index.html：

<div ng-app='myApp' ng-controller='myController'>
    <foo bar='bar'></foo>
</div>

app.js：

angular.module('myApp', ['templates']);

angular.module('myApp', ['templates']).directive('foo', function(){
    return {
        restrict: 'AE',
        scope: {
            bar: '='
        },
        templateUrl: 'bar.html'

    }
});

angular.module('myApp').controller('myController', function($scope, $http){
    $scope.bar = "XMan";
});

一个bar.html：

<h1> Hi {{ bar }}! </h1>
<ng-include src="'{{bar}}.html'"

XMan.html：

<p>Hello I'm XMan</p>

这里我期待我的foo指令呈现

<h1> Hi X Man! </h1>
<p> Hello I'm XMan </p>

但我正在

<h1> Hi {{ bar }}! </h1>
<!-- ngInclude: undefined -->

我的做法出了什么问题。请指导我;我是Angular.js的新手。

Answer 1

我有一个解决方案。我们无法将ng-include src与scope变量绑定。

相反，我使用函数调用来获取源代码然后它可以工作！

那就是我改变了

<ng-include src="'{{bar}}.html'"

到

<ng-include src="barUrl()"

并添加了控制器范围功能：

$scope.barUrl = function(){
    return $scope.bar + '.html'
}

Rails + Angular：指令问题

1 个答案: