Question

我正在制作一个带有angularjs的简单cms，但我的指令有问题。

我无法更新指令的内容。我没有收到任何错误，但内容未更新。

这是我的代码：

app.js

var postApp = angular.module('adminApp', [
  'ngRoute', 'angular-ladda'
]);

postApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/posts', {
            templateUrl: '/ngpartials/admin/blog/index.html',
            controller: 'PostListCtrl'
        }).
        otherwise({
            redirectTo: '/posts'
        });
    }
]);

postApp.controller('PostListCtrl', function($scope, $http){

    $scope.showLoading = false;

    $scope.items = [];

    $scope.name = 'Mike';
});

postApp.directive('helloWorld', function() {
    return {
        scope: {
            name: "="
        },
        restrict: 'E',
        template: '<h3>Hello World!!: {{ name }}</h3>'
    };
});

模板：

<div ng-controller="PostListCtrl" class="ui grid container">

    <h1 class="ui header"><a href="#/posts/">Posts</a></h1>

    <hello-world></hello-world>

    <div ng-view></div>

</div>

结果：

Hello World !!：

Answer 1

尝试这种方式：

<hello-world name="name"></hello-world>

指令已隔离范围，因此它不会从控制器范围继承数据。您应将信息从当前范围传递到指令的隔离范围。

Answer 2

您需要将名称传递给视图中的指令：

<hello-world name="name"></hello-world>

Answer 3

第一个问题是你的控制器正在创建它的实例两次，body有ng-controller而$routerProvider正在加载PostListCtrl控制器的其他实例。

采用这种方法，两次创建控制器实例从设计的角度来看是没有意义的。

因此，假设当您更新name ng-view已加载模板的范围值时，/ngpartials/admin/blog/index.html将不会更新helloWorld指令name，因为它位于外部＆安培;它从控制器分配给name标记获得body变量的值。

然后我会说将你的指令移到/ngpartials/admin/blog/index.html内容，比如将name的值传递给指令元素。

<hello-world name="name"></hello-world>

Answer 4

我更新了您的自定义指令代码。

postApp.directive('helloWorld', function() {

    return {
        scope: {
            name: "="
        },
        scope:true,
        restrict: 'E',
        template: '<h3>Hello World!!: {{ name }}</h3>'
    };
});

我也在这里附上JsFiddle链接： - http://jsfiddle.net/kpsingh/U3pVM/22839/

无法更新angularjs指令的内容

4 个答案: