Question

我的指令和控制器有问题。范围中的变量项在指令中是未定义的，即使我在html中传递它。这是我的代码：

app.js：

var app = angular.module("app", ["ngRoute"]);

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/main.html",
            controller: "MainCtrl" 
        });
}]);

controller.js：

app.controller("MainCtrl", function($scope) {
    $scope.item = "x";
});

directive.js：

app.directive("exampleDirective", function() {
    return {
        restrict: "A",
        scope: {
           item: "="
        },
        templateUrl: "views/item.html"
    };
});

的index.html：

<div ng-view></div>

main.html中：

<div example-directive item="item"></div>

item.html：

<div>{{ item }}</div>

更新

我将代码更改为：

app.directive("exampleDirective", function() {
    return {
        restrict: "A",
        scope: true,
        templateUrl: "views/item.html"
    };
});

现在范围内有“x”。$ parent.item。但为什么它不在指令内？

Answer 1

这个小提琴起作用：http://jsfiddle.net/HB7LU/2844/这与没有路线信息基本相同。

var myApp = angular.module('myApp',[]);

myApp.directive("exampleDirective", function() {
    return {
        restrict: "A",
        scope: {
           item: "="
        },
        template: "<div>{{ item }}</div>"
    };
});

function MyCtrl($scope) {
    $scope.item = 'Superhero';
}

有了观点：

<div ng-controller="MyCtrl">
    <div example-directive item="item"></div>
</div>

这让我相信它可能是一个范围问题。因此，请尝试将控制器范围变量封装在容器中：

$scope.cont = { item: 'x' };

在视图中

<div example-directive item="cont.item"></div>

Answer 2

虽然它似乎与最新的Angular稳定版http://plnkr.co/edit/6oXDIF6P04FXZB335voR?p=preview一样好用，但是你可能正试图使用那些指向它不存在的地方的templateUrl。

另一件事，只在严格需要时才使用原语。如果您需要修改item的值，则由于您使用的是原语，因此无法执行此操作。另外，如果您需要＆＃34;更多信息＆＃34;要进入隔离的范围，并避免属性汤（attr-this="that"，attr-that="boop"，my-otherstuff="anotheritem.member"等），您可以传递处理更多数据的对象的双向绑定。

或者，如果您需要通过多个控制器，指令等共享状态，请改用服务并使用依赖注入，并且不需要将对象/原语传递到您的隔离范围，您可以保证国家，以及那种最佳实践＆＃34; Angular方式＆＃34;。

指令中的$ scope.item未定义

2 个答案: